:第一个孩子选择器不工作

Question

我正在选择具有: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%;
}

Answer 1

在: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;
}

这是一个有效的例子