13

我正在使用:first-childand:last-child伪选择器选择特定的 div，但:first-child在我签入的任何浏览器中都不起作用。

我检查了 caniuse.com 和 css-tricks.com 并且共识是得到了:first-child广泛的支持，所以我想也许有一些我不知道的错误。我在本地节点服务器上运行该应用程序。我已经验证了我的 css 和我的 html。有人知道可能阻止:first-child工作的任何错误吗？

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%;
}
4

1 回答 1

25

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

这是一个工作示例

于 2013-11-12T21:45:03.950 回答