：第一个孩子选择器不工作 [英] :first-child selector not working

问题描述

我选择了具体的div：first-child和last-child伪选择器，但是：在我检查过的任何浏览器中，first-child不起作用。我检查了caniuse.com和css-tricks。 com和共识是：第一个孩子是相当广泛的支持，所以我想也许有一些我不知道的错误。我正在本地节点服务器上运行应用程序。我已验证我的CSS和我的HTML。是否有人知道可能会阻止的任何错误：第一个孩子工作？

HTML

 < div class =col-md-6 blurbs> 
< label> NEWS< / label> 
< div> 
 
 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>更多新闻< / a> 
< / div> 
< / div> 
  

CSS

/ p>

  .news .blurbs div：first-child {
 outline：1px solid red; 
 height：260px; 
溢出：auto; 
 margin-bottom：10px; 
 
 $ / code> 

（working）



  .news .blurbs div：最后一个孩子{
大纲：1px纯红色; 
宽度：95％; 
 
  




解决方案：first-child 和：last-child 伪类选择父元素的第一个/最后一个子元素，其他链式选择器，因此 div：first-child 实际上并不匹配任何内容，因为 .blurbs 中的第一个子项不是一个 div 。

你需要使用什么来获得你之后的效果是：

  .news .blurbs div：第一种类型{
大纲：1px纯红色; 
 height：260px; 
溢出：auto; 
 margin-bottom：10px; 
} 
  

这里是一个工作示例

I am selecting specific divs with the :first-child and :last-child pseudo selectors but :first-child is not working in any browser I have checked it in. I've checked caniuse.com and css-tricks.com and the consensus is that :first-child is pretty widely supported so I'm thinking maybe there is some bug I am not aware of. I am running the app on a local node server. I have validated both my css and my html. Is anyone aware of any bugs that might prevent :first-child from working?

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

(not working)

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

(working)

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

解决方案

The :first-child and :last-child pseudo-classes select the element that is the first/last child of the parent, filtered by any other chained selector, so div:first-child does not actually match anything as the first child within .blurbs is not a div.

What you need to use to get the effect you are after is the :first-of-type pseudo-class like this:

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

here is a working example

这篇关于：第一个孩子选择器不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！