html – :第一个子选择器不工作

前端之家收集整理的这篇文章主要介绍了html – :第一个子选择器不工作前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在选择具有:first-child和:last-child伪选择器的特定div,但是:first-child在我检查过的任何浏览器中都不起作用.我已经检查了caniuse.com和css-tricks.com以及共识是:第一个孩子得到了广泛的支持,所以我想也许有一些我不知道的错误.我在本地节点服务器上运行应用程序.我已经验证了我的CSS和我的 HTML.是否有人知道任何可能阻止的错误:第一个孩子工作?

HTML

  1. <div class="col-md-6 blurbs">
  2. <label>NEWS</label>
  3. <div>
  4. <p>Lorem ipsum dolor spernatur aut odit aut fugit conse oluptate</p>
  5. </div>
  6. <div class="clearfix">
  7. <a class="pull-left">RSS</a>
  8. <a class="pull-right">MORE NEWS</a>
  9. </div>
  10. </div>

CSS

(不工作)

  1. .news .blurbs div:first-child{
  2. outline: 1px solid red;
  3. height: 260px;
  4. overflow: auto;
  5. margin-bottom: 10px;
  6. }

(工作)

  1. .news .blurbs div:last-child{
  2. outline: 1px solid red;
  3. width: 95%;
  4. }

解决方法

:first-child和:last-child伪类选择父元素的第一个/最后一个子元素,由任何其他链式选择器过滤,因此div:first-child实际上不匹配任何内容作为第一个子元素.blurbs不是div.

你需要用什么来获得你想要的效果是:first-of-type伪类,如下所示:

  1. .news .blurbs div:first-of-type{
  2. outline: 1px solid red;
  3. height: 260px;
  4. overflow: auto;
  5. margin-bottom: 10px;
  6. }

here is a working example

猜你在找的HTML相关文章