只有当第一个孩子有一个特定的班级时，我如何才能定位一个孩子班级？答案

【问题标题】：How can I target a child class only if the first child has a specific class?只有当第一个孩子有一个特定的班级时，我如何才能定位一个孩子班级？
【发布时间】：2022-01-21 19:21:28
【问题描述】：

只有当第一个孩子有类 .hovered 时，我如何才能在 .child-ccc 类中定位 ::before？

这是 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

【问题讨论】：

试试.child:first-child.child-ccc:before
@Spankied 感谢您发表评论。我认为这不会起作用，因为 .child 和 .child-ccc 不能在同一个字符串中。 .child-ccc 是 .child 兄弟的后代

标签： html css parent-child parent

【解决方案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>

【讨论】：

感谢您纠正我如何使用+ 和~。不幸的是，它没有针对:first-child 的第一个.child。你认为这是因为我的父 div 嵌套在其他 div 中吗？为了便于阅读，我没有在此处显示该输出。
@Ruby 通过添加 HTML 的外观来更新问题
@Ruby 尝试在.parent 前添加前缀以增加特异性。
您的回答解决了我的问题。谢谢！我将永远正确使用这些选择器。

【解决方案2】：

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

【讨论】：

感谢您的回复！我想我应该提到当用户将鼠标悬停在 div 上时，.hovered 类会被注入。话虽如此，当 first .child 具有 .hovered 类时，我该如何定位它？现在，您的代码将针对悬停的 all .child。希望这是有道理的！

【解决方案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{
    ... 
}

【讨论】：

谢谢你的解释！！我想我应该提到当用户将鼠标悬停在 div 上时，.hovered 类会被注入。话虽如此，当 只有第一个 .child 具有 .hovered 类时，我该如何定位它？现在，您的代码将针对悬停的 all .child。希望这是有道理的！