当我在我的部分开头添加一个标题标签并且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>
解决方法
.pubs：first-child查找一类pubs,它也是其父元素的第一个子元素(在这种情况下,parent元素是类内容.一旦你在第一个pubs类之前添加一个h2元素,那么pubs就不再了第一个孩子,但第二个.
试试.pubs：first-of-type代替：
.pubs:first-of-type .newsdate {
border: none;
}
：first-of-type伪选择器将查找您添加的任何类或ID或元素的第一种类型.通过这个,我的意思是,如果一个元素(div),一个类(.pub)或一个ID(#pub)出现在伪选择器之前(每个都是有效的)并不重要.虽然使用ID没有多大意义,因为它们应该是唯一的.
还要注意我说的第一种类型,而不是第一种情况(两个人已经评论过(一个人已经删除了他们的评论)混淆了我在说什么).例如,如果在三个div元素和两个p元素上有类.pubs,则：first-of-type伪选择器将应用于第一个.pubs div元素和第一个.pubs p元素.
因此,第一类伪选择器可以应用于多个元素,具体取决于您使用它的方式.
如果你考虑一下,这是一个比你第一次使用它时更好的解决方案,因为这个解决方案专门针对.pubs类的第一个实例,而你的例子只能在有条件的情况下工作(之前没有任何东西).酒吧).
