标题标签的第一个子伪选择器问题

Question

我今天在设计动态新闻页面时遇到了困难，因为我在我的部分开头添加了一个标题标签，而 div 内的第一个 p 标签的第一个子标签停止工作。 这就是我试图做的事情，它一直在工作，直到我添加了标题标签。

.pubs .newsdate {
    border-top:1px solid rgb(255,179,0);
}
.pubs:first-child .newsdate {
    border:none;
}

<section class="content">
    <h2>News</h2> //issue
    <div class="pubs">
        <p class="newsdate">stuff</p>
    </div>
    <div class="pubs">
        <p class="newsdate">stuff</p>
    </div>
    <div class="pubs">
        <p class="newsdate">stuff</p>
    </div>
</section>

在我添加标题 (h2) 标记之前，第一个边框被正确删除。 然后，伪选择器停止工作。 可能发生了什么？

Answer 1

.pubs:first-child 查找 pubs 的类 它也是其父元素的第一个子元素（在这种情况下，父元素是类 content。一旦添加了 @987654326 @ 元素在第一个 pubs 类之前，那么 pubs 不再是 first 子元素，而是 second。

改用.pubs:first-of-type：

.pubs:first-of-type .newsdate {
    border: none;
}

:first-of-type 伪选择器将查找您在其前面添加的任何类或 ID 或元素的第一个 type。我的意思是，一个元素 (div)、一个类 (.pub) 或一个 ID (#pub) 是否出现在伪选择器之前并不重要（每个都是有效的）。虽然使用 ID 没有多大意义，因为它们应该是唯一的。

还请注意，我说的是第一个 type，而不是第一个 instance（两个人已经对我所说的内容感到困惑地发表了评论（一个人删除了他们的评论））。例如，如果您在三个 div 元素和两个 p 元素上有类 .pubs，则您的 :first-of-type 伪选择器将应用于第一个 .pubs div 元素 AND 第一个 @ 987654340@ 元素。

所以first-of-type 伪选择器可以应用于多个元素，这取决于你如何使用它。

如果您考虑一下，这比您第一次使用它时更好的解决方案，因为该解决方案专门针对 .pubs 类的第一个实例，而您的示例仅在间接情况下有效（当没有.pubs 之前的任何内容。

Answer 2

您可以使用:first-of-type 来避免这种情况。

Example Here

.pubs:first-of-type .newsdate {
    border:none;
}