html - 带有标题标签的第一子伪选择器问题

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 类。在第一个 pubs 类之前添加 h2 元素后，pubs 就是不再是第一个 child ，而是第二个。

尝试使用 .pubs:first-of-type 代替:

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

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

另请注意，我说的是第一个type，而不是第一个instance(两个人已经对我所说的内容发表了评论(其中一个删除了他们的评论))。例如，如果你在三个 div 元素和两个 p 元素上有类 .pubs，你的 :first-of-type 伪选择器将应用于第一个 .pubs div 元素 AND 第一个 .pubs p 元素。

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

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