获得nth-of-type不针对儿童的孩子？

Question

我正在尝试使用CSS <h1>属性定位<div>中的first-of-type元素，但我注意到这不仅针对此{{1}的第一个孩子类型为<div>的类型，但它也针对类型为<h1>的子项的子项，这对我来说似乎不太有用。是否有任何方式可以将儿童的孩子排除在外？

在下面的示例中，我有一个<h1>，它是<h1>的直接孩子，名为<div>。我尝试在CSS中定位#everything，但这会导致在子<h1>内定位正确的<h1>以及另一个<h1>。

<div>

#everything h1:first-of-type{
  color: red;
}

Answer 1

这是你想要的吗？

＆＃13;

＆＃13;

#everything>h1:first-of-type{
  color: red;
}

＆＃13;

<div id="everything">
  <h1>hello</h1>
  <div id="something">
      <h1>goodbye</h1>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

用这个更新你的css代码。

#everything > h1{
    color: red;
}

还有一个选择：

#everything:first-child > h1 {
    color: red;
}

对于此选项 #everything：first-child ，您需要指定子 h1 或 class / id。