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>

小提琴样本：http://jsfiddle.net/zvwqnwu2/5/

工作小提琴：http://jsfiddle.net/zvwqnwu2/9/

Answer 1

我认为添加了一个额外的字母，因此它不会影响

从班级名称

中删除-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

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

class没有news-tab-item-wrapper-w的元素。
即使以上是拼写错误，也只有一个元素类为news-tab-item-wrapper。其他人有news-tab-wrapper。
如果这也是一个拼写错误并且所有人都有相同的类，那么选择器仍然无效，因为每个这样的项目都是其父项的唯一子项。

对于您的情况，我相信您需要以下选择器。此选择器会在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类定位最后一个元素，那么您可以使用以下任一选择器作为当前标记。

#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 3

“。news-tab-item-wrapper”是“＃news-tab＆gt; div”的第一个孩子

也是错误的.news-tab-item-wrapper -w ：

尝试

protected void CalculateTotal()
{
    string cnnString = ConfigurationManager.ConnectionStrings["ConnectionString1"].ConnectionString;
    SqlConnection conn = new SqlConnection(cnnString);
    conn.Open();
    SqlCommand cmd1 = new SqlCommand("select sum (quantity * price) from cart", conn);

    lblsubtotal.Text = Convert.ToString(cmd1.ExecuteScalar());
    conn.Close()
}

更好的aporoch将在第一个项目上显示边框而不是隐藏所有其他可用的

#news-tab > div:nth-child(2n+1){
    //css here
    border-right:2px solid #fff;
    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选择器不工作

4 个答案: