Question

我有这个HTML代码：

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

知道这里有什么问题吗？

Answer 1

: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元素的样式部分视需要。

Answer 2

这考虑了清算div。

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

nth-of-type表现得像n-child

2 个答案: