我正在选择具有:first-child和:last-child伪选择器的特定div但是:first-child在我检查过的任何浏览器中都不起作用。我已经检查了caniuse.com和css-tricks。 com和共识是:第一个孩子被广泛支持,所以我想也许有一些我不知道的错误。我在本地节点服务器上运行应用程序。我已经验证了我的CSS和我的HTML。是否有人知道任何可能阻止的错误:第一个孩子在工作?
HTML
<div class="col-md-6 blurbs">
<label>NEWS</label>
<div>
<p>Lorem ipsum dolor spernatur aut odit aut fugit conse oluptate</p>
</div>
<div class="clearfix">
<a class="pull-left">RSS</a>
<a class="pull-right">MORE NEWS</a>
</div>
</div>
CSS
(不工作)
.news .blurbs div:first-child{
outline: 1px solid red;
height: 260px;
overflow: auto;
margin-bottom: 10px;
}
(工作)
.news .blurbs div:last-child{
outline: 1px solid red;
width: 95%;
}
答案 0 :(得分:16)
:first-child
和:last-child
伪类选择父元素的第一个/最后一个子元素,由任何其他链式选择器过滤,因此div:first-child
实际上不匹配任何内容因为.blurbs
中的第一个孩子不是div
。
你需要用什么来获得你想要的效果是这样的:first-of-type
伪类:
.news .blurbs div:first-of-type{
outline: 1px solid red;
height: 260px;
overflow: auto;
margin-bottom: 10px;
}