Html 第n个类型，表现得像第n个孩子

我有以下html代码：

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

这将选择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>

//这是我选择的
//这一个应该选择

知道这里出了什么问题吗？

：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

元素的样式。

这将考虑清除div

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

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