仅当第一个 child 具有特定的 class 时，我如何才能定位 child class？

Question

只有当第一个 child 有 class 悬停时，我如何才能在 class 中定位 ::before。child-ccc？

这是 HTML 输出：

<div class="parent">
    <div class="child hovered">
        <div class="child-aaa"></div>
        <div class="child-aaa"></div>
    </div>

    <div class="child"></div>

    <div class="child-c">
        <div class="child-ccc">
            ::before
        </div>
    </div>
</div>

我试过了 .child:first-child.hovered + .child-c .child-ccc:before

Answer 1

+ 选择器只选择相邻的兄弟姐妹，但 child-c 不是。所以，你必须使用 ~.

.parent .child:first-child.hovered~.child-c .child-ccc::before {
  content: '';
  display: block;
  height: 1rem;
  background-color: purple;
}

<div class="parent">
  <div class="child hovered">
    <div class="child-aaa">aaa</div>
    <div class="child-aaa">aaa</div>
  </div>

  <div class="child">bbb</div>

  <div class="child-c">
    <div class="child-ccc">
      ccc
    </div>
  </div>
</div>

Answer 2

是的，您可以使用高级 CSS 选择器来实现。试试这个代码 .child.hovered ~ .child-c > child-ccc::before 此符号 ~ 表示 .child.hovered class 的兄弟元素， > 表示直接子元素。

Answer 3

选择器 + 是 adjacent sibling combinator 这意味着如果我们写 img + p 它选择 Paragraphs that come immediately after any image 而选择器 ~ 是 General sibling combinator 这意味着如果我们使用 img ~ p 它会选择 Paragraphs that are siblings of and subsequent to any image.

所以在你的问题中你应该使用 ~ 而不是 + 来实现你的目标：

.child.hovered ~ .child-c .child-ccc::before{
    ... 
}

仅当第一个 child 具有特定的 class 时，我如何才能定位 child class？

How can I target a child class only if the first child has a specific class?

html

css

parent

parent-child