第n-的类型像个第n个孩子

我有这样的HTML代码：第n-的类型像个第n个孩子

<div class="productWarp"> 
    <div class="clear"></div> 
    <div class="productLine" ></div> 
    <div class="clear"></div> 
    <div class="productLine" ></div> 
    </div>

CSS：

.productWarp .productLine { 
     background-color: #DFDDDD; 
     border-bottom: 1px solid #B7B7B7; 
     padding-right: 5px; 
    } 


    .productWarp .productLine:nth-of-type(2) 
    { 
     background-color: white; 
     border-bottom: 1px solid #B7B7B7; 
     padding-right: 5px; 
    }

此选择productWarp（第一PRODUCTLINE）的第二个孩子，而不是第二productLine，所以它的行为恰如n孩子选择器

<div class="productWarp"> 
    <div class="clear"></div> 
    <div class="productLine" ></div>//this one is choose 
    <div class="clear"></div> 
    <div class="productLine" ></div>//this one should be choose 
    </div>

任何想法这里有什么错？

来源

2013-10-20 baaroz

:nth-of-type()看着一个元素的类型，而不是它的类。在这种情况下，您的所有元素都是div类型，这就是为什么:nth-of-type()与:nth-child()完全相同的原因。

如果你只有两个.productLine元素，使用下面的选择样式，而不是你的第二个：

.productWarp .productLine ~ .productLine 
{ 
    background-color: white; 
    border-bottom: 1px solid #B7B7B7; 
    padding-right: 5px; 
}

否则你就得通过:nth-child()指数中去，在这种情况下:nth-child(4)，或覆盖样式对于随后的.productLine元素，通过添加更多规则重复~ .productLine部分（如有必要）。

来源

2013-10-20 12:37:57 BoltClock

productLine的数量没有变化 – baaroz

这考虑到清算分区。

.productWarp div.productLine:nth-of-type(4n)

来源

2013-10-20 12:44:08

第n-的类型像个第n个孩子

回答

相关问题