html 如何选择同一元素下但深度不同的h4元素中的第一个？

k2fxgqgv 于 2023-04-18 发布在其他

关注(0)|答案(2)|浏览(102)

例如，我有这样的代码：

<div class="main-element">
    <h4>Title 1</h4>
    <ul>
        <li></li>
        <li></li>
        <li>
            <h4>Title2</h4>
        </li>
    </ul>
</div>

我想在所有h4元素上选择和使用相同的样式，但我也想在第一个元素上添加其他样式。例如，我希望所有h4元素的margin-top和margin-bottom的值为8 px，但对于第一个h4元素，我希望它们的margin-top的值为0。
我尝试过使用：first-child和first-of-type选择器。例如：

.main-element h4 {
  color: blue;
}

.main-element h4:first-of-type {
  color: red;
}

它将所有元素都着色为红色，而不仅仅是第一个元素。

Html

来源：https://stackoverflow.com/questions/76005335/how-to-select-the-first-one-of-a-h4-element-that-is-under-the-same-element-but-i

2条答案

按热度按时间

mm5n2pyu1#

first-of-type对于两个h4都是真的，因为第二个在<li>内部，这使得first-of-type再次成为第一个孩子。
考虑将类添加到要设置样式的类中

.main-element .reset {
  margin-top: 0px;
  color: red;
}

.main-element h4 {
  margin-top: 8px;
  margin-bottom: 8px;
  color: blue;
}

<div class="main-element">
    <h4 class='reset'>Title 1</h4>
    <ul>
        <li></li>
        <li></li>
        <li>
            <h4>Title2</h4>
        </li>
    </ul>
</div>

赞(0）回复(0）举报 2023-04-18

3phpmpom2#

first-of-type总是与当前父对象相关，即它意味着“该类型在该容器中的第一次出现”。因此，您的.main-element h4:first-of-type匹配main-element的后代的每个h4，并且是其父对象中的第一个h4。
如果你只想为父对象的直接子对象设置样式，你可以使用“〉”选择器，比如：

.main-element > h4:first-of-type {
  color: red;
}

赞(0）回复(0）举报 2023-04-18

我来回答

html 如何选择同一元素下但深度不同的h4元素中的第一个？

2条答案

相关问题

热门标签

最新问答