头条标签

Question

的第一个孩子伪选择器问题当我在我的部分的开始处添加标题标签并且div内的p标签的第一个孩子停止工作时，我今天设计了新闻的动态页面时出现卡住现象。 这是我正在尝试做的事情，它一直在工作，直到我添加标题标记。

HTML：

<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> 

CSS：

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

第一边界正在正常删除，直到我添加了标题（H2）标签。 然后，伪选择器停止工作。 会发生什么？

在此先感谢。

Answer 1

.pubs:first-child寻找一类pubs，这也是第一个孩子的父元素的（在这种情况下，父元素是content类。一旦你的第一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元素。

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

如果你考虑一下，这是一个比你第一次使用它的方法更好的解决方案，因为这个解决方案专门针对.pubs类的第一个实例，而你的例子只能在情况下工作（当没有在.pubs之前的任何东西）。

Answer 2

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

Example Here

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