nth-child 选择器不工作

Question

我需要根据屏幕尺寸隐藏 4、3、2 包装器的边框。

我根据屏幕尺寸在一行中显示 4、3、2 和 1 个项目。

@media( min-width:1000px){
  #news-tab > div > .news-tab-item-wrapper:nth-child(2n+1){
   border-right:2px solid #fff;
   background:red;
  }
}

基于以上 CSS 它不应显示最后一个元素的边框，但我无法定位它。可能是我在这种情况下使用了错误的参考。

<div id="news-tab" class="tab-pane">
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <div class="news-tab-item-wrapper"> 
      <span>This is News Title</span>
      <a href="#">Read More</a>
    </div>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <div class="news-tab-item-wrapper"> 
      <span>This is News Title</span>
      <a href="#">Read More</a>
    </div>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <div class="news-tab-item-wrapper"> 
      <span>This is News Title</span>
      <a href="#">Read More</a> 
    </div>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <div class="news-tab-item-wrapper"> 
      <span>This is News Title</span>
      <a href="#">Read More</a>
    </div>
  </div>
</div>

Fiddle 样本：http://jsfiddle.net/zvwqnwu2/5/

工作Fiddle：http://jsfiddle.net/zvwqnwu2/9/

Answer 1

我假设添加了一个额外的字母，所以它不会影响

从 class 名称中删除 -w

@media( min-width:1000px){
#news-tab > div > .news-tab-item-wrapper:nth-child(2n+1){
 border-right:2px solid #fff;
 background:red;
}
}

DEMO

Answer 2

".news-tab-item-wrapper" 是 "#news-tab > div" 的 first-child"

也拼错了。news-tab-item-wrapper -w:

尝试

#news-tab > div:nth-child(2n+1){
    //css here
    border-right:2px solid #fff;
    background:red;
}

更好的 aporoch 是在第一个项目上显示边框，而不是在所有其他项目上隐藏边框，因为您可以使用

 #news-tab > div:first-child{
      //add border
 }

Answer 3

有问题的代码中存在一些错误：

没有 class 为 news-tab-item-wrapper-w 的元素。
即使上面是错字，也只有一个元素 class 和 news-tab-item-wrapper 一样。其他人有news-tab-wrapper.
如果这也是一个拼写错误并且都具有相同的 class，selector 仍然无法工作，因为每个这样的项目都是其父项的唯一子项。

对于您的情况，我相信您需要以下 select 或。这 select 或者将 select 具有 class 的元素作为 news-tab-item-wrapper 在 div 元素下，该元素不是其父元素的第一个子元素。

#news-tab > div:nth-child(n+2) > .news-tab-item-wrapper{
     border-right:2px solid blue;
     background:red;
}

如果你想用 .news-tab-item-wrapper class 定位最后一个元素，那么你可以使用下面的任何一个 select 或者你当前的标记。

#news-tab > div:last-of-type > .news-tab-item-wrapper{
     border-right:2px solid blue;
     background:red;
}

或

#news-tab > div:last-child > .news-tab-item-wrapper{
     border-right:2px solid blue;
     background:red;
}

Answer 4

div > :nth-child(3)     the third child of a div element
div > :nth-child(even)  every even child of a div element
div > :nth-child(odd)   every odd child of a div element
div > :nth-child(3n)    every third child of a div element

更多详情点击此处

http://www.sitepoint.com/web-foundations/nth-childn-css-selector/

nth-child 选择器不工作

nth-child selector not working

html

css

css-selectors