：第一个子项未按预期工作

一尘不染

：第一个子项未按预期工作

css

我试图选择一个名为的类中的第h1一个。如果它是其中的第一个元素，它会起作用，但是如果在它之后出现，它将不起作用。div``detail_container``h1``div``ul

<style type="text/css">
.detail_container h1:first-child
{
color:blue;
} 
</style>
</head>
<body>
<div class="detail_container">
    <ul>
    <li></li>
    <li></li>
    </ul>
    <h1>First H1</h1>
    <h1>Second H1</h1>
</div>
</body>
</html>

我的印象是，h1无论它在哪里，我拥有的CSS都会选择第一个div。我该如何运作？

阅读 304

2020-05-16

共1个答案

一尘不染

该h1:first-child选择装置

当且仅当它是一个h1元素时，才选择其父项的第一个孩子。

所述:first-child容器的这里是ul，这样不能满足h1:first-child。

:first-of-type您的情况有CSS3 ：

.detail_container h1:first-of-type
{
    color: blue;
}

但是由于浏览器兼容性问题而已，那么最好还是给第h1一个类一个类，然后再定位该类：

.detail_container h1.first
{
    color: blue;
}

2020-05-16