Question

考虑以下HTML。

<div class="definedOuter">
  <div>
    <div class="maybe some classes">
      <h2>Heading</h2>
      <p>Text</p>
      <div>
        <h2>Other Heading</h2>
      </div>
    </div>
  </div>
</div>

我不知道.definedOuter里面可能有多少个元素，但我知道里面有这些元素，我想在<h>内部的第一个.definedOuter内应用CSS。 / p>

:first-child和:first-of-type似乎不起作用，因为它们基于所选元素父级，而不是某些任意元素。目前，我正在将一个类应用于第一个<h>标记并执行.definedOuter .class选择器，但我不需要一个类。

是否有任何CSS魔法可以选择<h>代码？

为了清晰起见，我希望增加一个小提琴。 https://jsfiddle.net/ezff01ap/

Answer 1

您可以使用>运算符将其设置得更精确。

.definedOuter > div > div > h2:first-of-type {
  background-color: red;
}

<div class="definedOuter">
  <div>
    <div class="aClass">
      <h2>Heading</h2>
      <p>Text</p>
      <div>
        <h2>Other Heading</h2>
      </div>
    </div>
  </div>
</div>

<强>更新

如果div上有一个类是标题的父级，则可以使用相同的运算符，如下所示：

.definedOuter div.aClass > h2:first-of-type {
  background-color: red;
}

<div class="definedOuter">
  <div>
    <div class="aClass">
      <h2>Heading</h2>
      <p>Text</p>
      <div>
        <h2>Other Heading</h2>
      </div>
    </div>
  </div>
</div>

Answer 2

我认为没有CSS方法可以做到这一点。使用jQuery，你可以像

那样做

$(".definedOuter h2").first().css("color","red");

选择已定义容器中的第一个头但不是第一个子容器

2 个答案: