html - 第 nth-of-type 表现得像第 nth-child

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，因此它的行为与第 nth-child 选择器完全相同

<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 部分的规则。