html - css first-of-type 在其他类下

Question

我有一个看起来像这样的 html 文件:

<div class="my_class">
    <h1>gets styled and that's good</h1>
    <h1>doesn't get styled and this is intended</h1>
    <div class="my_other_class">
        <h1>but this also get styled, but shouldn't</h1>
    </div>
</div>

<div class="my_class">
    <h1>do style</h1>
    <h1>don't style</h1>
    <div class="my_other_class">
        <h1>shouldn't but does</h1>
    </div>
</div>

现在我使用 .my_class h1:first-of-type {...} 来设置第一个 h1 的样式。然而，第三个也得到了风格，不应该。

有没有办法只选择第一个h1？

Answer 1

使用子组合器 >。

.my_class > h1:first-of-type {
  color: red;
}

<div class="my_class">
  <h1>gets styled and that's good</h1>
  <h1>doesn't get styled and this is intended</h1>
  <div class="my_other_class">
    <h1>but this also get styled, but shouldn't</h1>
  </div>
</div>