html - nth-child のように動作する nth-of-type

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

これは、2 番目の productLine ではなく、productWarp の 2 番目の子 (最初の 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()

要素が 2 つしかない場合は.productLine、代わりに次のセレクターを使用して 2 つ目のスタイルを設定します。

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