2

I have this html code:

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

This choosing the second child of productWarp(first productLine) and not the second productLine,so it acting Exactly as nth-child selector

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

any idea what wrong here?

4

2 回答 2

6

: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-20T12:37:57.493 回答
1

这考虑了清算股利。

.productWarp div.productLine:nth-of-type(4n)
于 2013-10-20T12:44:08.240 回答