50

最初の2つと最後の2つを除いて、要素のすべての子をどのように選択するかを知りたいのですが（それだけです）。

私は方法を持っていますが、それは厄介で読めません。8つの疑似セレクターを必要としないはるかに明確な方法が必要です。

:not(:nth-child(1)):not(:nth-child(2)):not(:nth-last-child(1)):not(:nth-last-child(2)) {
    background: purple;
}

ええ、それはかなりひどいです。文字通り、最初または2番目の最初または最後ではないすべての要素を選択します。2疑似セレクターに重ねる代わりに、半変数として使用するメソッドが必要です。

私は別のものを考えました（まだ厄介です）：

:not(:nth-child(-1n+2)):not(:nth-last-child(-1n+2)) {
    background: purple;
}
4

3 に答える 3

76

あなたも必要ありません:not()。:nth-child(n+3):nth-last-child(n+3)正常に動作します。

こちらをご覧ください。

于 2015-11-17T11:18:10.120 に答える
29

:nth-childとを使用する以外のオプションは表示されません:not(:nth-last-child)。

私のバージョン：hr:nth-child(n+3):not(:nth-last-child(-n+2))

デモ

参考文献によると:nth-child：

:nth-childCSS疑似クラスは、ドキュメントツリーでその前に兄弟があり、nに正またはゼロの値が指定されている要素と一致し、an+b-1親要素があります。

つまり、このクラスは、インデックスがセットに含まれるすべての子に一致します{ an + b; ∀n ∈ N }。

したがってnth-child(n+3)、3番目の要素から始まるすべての要素に一致します。

:nth-last-child同様に機能しますが、要素コレクションの最後からであるため:nth-last-child(-n+3)、コレクションの最後から始まる2つの要素のみに一致します。:notこれらの2つの要素のため、セレクターから除外されます。

于 2013-03-24T21:07:00.283 に答える
3

紫をすべての要素に設定し、3つの不要な要素から削除するだけです。

element { background: purple }
element:first-child, element:nth-child(2), element:last-child, element:nth-last-child(2) {
   background: none; /* or whatever you want as background for those */
}

それは私見はるかに読みやすいです

于 2013-03-24T21:12:03.673 に答える