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

请尝试.pubs:first-of-type：

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

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

还要注意我先说了类型，而不是第一个实例（两个人已经评论过（一个人已经删除了他们的评论），这些都是我所说的。例如，如果您在三个.pubs元素和两个div元素上有p个类，那么您的:first-of-type伪选择器将应用于第一个.pubs div元素< strong> AND 第一个.pubs p元素。

所以first-of-type伪选择器可以应用于多个元素，具体取决于您使用它的方式。

如果您考虑一下，这是一个比您第一次使用它时更好的解决方案，因为此解决方案专门针对.pubs类的第一个实例，而您的示例仅在情况上有效（在那里在.pubs）之前不是什么。

Answer 2

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

Example Here

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

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

2 个答案: