31

:nth-child()とを混在させることは可能afterですか?

アイテムが<ol>あり、テキストを追加したい:after。これは問題なく動作しますが、1 番目、2 番目、3 番目の項目、さらに 4 番目、5 番目、6 番目の項目にも異なるテキストを表示したいと考えています。

以下のコードでは、すべてliの後にピンク色の「大」が表示されます。

これは私には意味がありませんが、私はこのnth-child悪意に慣れていません。

data.html

<ol id="id" class="ui-sortable">
    <li>
        <p>Bacon</p>
    </li>
    <li>
        <p>Bacon</p>
    </li>
    <li>
        <p>Bacon</p>
    </li>

    <!.. repeats -->

    <li>
        <p>Bacon</p>
    </li>
</ol>

かわいい.css

#id li p:after {
    float: right;
    content: 'nom';
}

#id li p:nth-child(1):after,
#id li p:nth-child(2):after,
#id li p:nth-child(3):after {
    content: 'OM';
    color: pink;
}

#id li p:nth-child(4):after,
#id li p:nth-child(5):after,
#id li p:nth-child(6):after {
    content: 'Nom';
    color: blue;
}

これは単に「あれば便利な」機能であるため、js でこれを実行したくありません。

私は新しいブラウザーについてのみ心配しているので、oldIE などの回避策は必要ありません。

4

3 に答える 3

39

できますが、やり方が間違っています..

すべてのp要素が の中にあるという問題li。したがって、それらはすべてliコンテナの最初の子です。

nth-childをli要素に配置する必要があります。

#id li:nth-child(1) p:after,
#id li:nth-child(2) p:after,
#id li:nth-child(3) p:after {
    content: 'OM';
    color: pink;
}

#id li:nth-child(4) p:after,
#id li:nth-child(5) p:after,
#id li:nth-child(6) p:after {
    content: 'Nom';
    color: blue;
}

W3C ドキュメントの引用

:nth-child(an+b)疑似クラス表記は、文書ツリー内で n の値が正の整数またはゼロの場合に +b-1 個の兄弟を持ち、親要素を持つ要素を表します。

更新 1

を使用してこれを単純化することもできます

#id li:nth-child(-n+3) p:after {
    content: 'OM';
    color: pink;
}

#id li:nth-last-child(-n+3) p:after { /*this means last 3*/
    content: 'Nom';
    color: blue;
}

http://jsfiddle.net/gaby/4H4AS/2/のデモ

更新 2

最初の 6 つだけを変更したい場合 (最初の 3 と最後の 3を変更したくない場合)

#id li:nth-child(-n+6) p:after { /*this means first 6*/
    content: 'Nom';
    color: blue;
}

#id li:nth-child(-n+3) p:after {/*this means first 3 and since it comes second it has precedence over the previous for the common elements*/
    content: 'OM';
    color: pink;
}

http://jsfiddle.net/gaby/4H4AS/3/のデモ

于 2012-12-19T17:10:42.870 に答える
7

次のように行う必要があります。

#id li:nth-child(1) p:after,
#id li:nth-child(2) p:after,
#id li:nth-child(3) p:after {
    content: 'OM';
    color: pink;
}
#id li:nth-child(4) p:after,
#id li:nth-child(5) p:after,
#id li:nth-child(6) p:after {
    content: 'Nom';
    color: blue;
}

JSフィドル。

...常に、表示されている HTML 構造<p>の最初の子です。<li>

ただし、content: 'nom';最初のスタイル定義のルールが上書きされたことに注意してください (ただし、'float' ルールは有効でした): ':after' 疑似要素のカスケード ルールは他のものと同じです。)

于 2012-12-19T17:10:22.880 に答える