2

注: より明確な説明については、以下を参照してください。

なぜこれが起こっているのかを理解しようとしています。

jsFiddle 1-前

HTML

<div class="chicken">
    <div class="big-chix">Contento</div>
    <div class="big-chix">Contento</div>
    <div class="big-chix">Contento</div>
    <div class="big-chix">Contento</div>
    <div class="big-chix">Contento</div>
    <div class="big-chix">Contento</div>
</div>

CSS

.chicken { width:100%; background:#999; float:left; }

.big-chix { width:48%; margin:0.5%; padding:0.5%; background:#666; float:left; }

.big-chix:nth-child(2n+1) { background-color:#eee; }
.big-chix:nth-child(2n+2) { background-color:#aaa; }

ここで達成しようとしているのは.big-chix、n 番目の子供 1、3、5... および 2、4、6... のクラスに異なる背景を設定することです。

しかし、段落 (または div などのようなもの) を入れると、次のようになります。

jsFiddle 2 - 後

HTML

<div class="chicken">
    <p>paragraphy</p>
    <div class="big-chix">Contento</div>
    <div class="big-chix">Contento</div>
    <div class="big-chix">Contento</div>
    <div class="big-chix">Contento</div>
    <div class="big-chix">Contento</div>
    <div class="big-chix">Contento</div>
</div>

CSS

.chicken { width:100%; background:#999; float:left; }

.big-chix { width:48%; margin:0.5%; padding:0.5%; background:#666; float:left; }

.big-chix:nth-child(2n+1) { background-color:#eee; }
.big-chix:nth-child(2n+2) { background-color:#aaa; }

n 番目の子の配置が入れ替わります。これはなぜですか？すべてのクラス ( 6 ).big-chix:nth-child()を選択するだけではなく、 1, 3, 5 を に設定し、2 , 4, 6 を に設定しますか?.big-chix.big-chixbackground-color#eee#aaa

編集:私が収集したものから、nth-child次のようなコードでは、要素の親の要素の子には適用されません:

<p>jsFiddle -段落が最初の要素の場合は nth-child(1)

HTML

<div class="chicken">
    <p>paragraphy</p> [this is nth-child(1)]
    <div class="big-chix">Contento</div> [this is nth-child(2)]
    <div class="big-chix">Contento</div> [this is nth-child(3)]
    <div class="big-chix">Contento</div> [this is nth-child(4)]
    <div class="big-chix">Contento</div> [this is nth-child(5)]
    <div class="big-chix">Contento</div> [this is nth-child(6)]
    <div class="big-chix">Contento</div> [this is nth-child(7)]
</div>

CSS

.chicken { width:100%; background:#999; float:left; }

.big-chix { width:48%; margin:0.5%; padding:0.5%; background:#666; float:left; }

.big-chix:nth-child(1) { background-color:#eee; }

しかし.big-chix、最初の要素として持つ親要素で機能します。

jsFiddle -.big-chix最初の要素を持つ n 番目の子

HTML

<div class="chicken">
    <div class="big-chix">Contento</div> [this is nth-child(1)]
    <p>paragraphy</p> [this is nth-child(2)]
    <div class="big-chix">Contento</div> [this is nth-child(3)]
    <div class="big-chix">Contento</div> [this is nth-child(4)]
    <div class="big-chix">Contento</div> [this is nth-child(5)]
    <div class="big-chix">Contento</div> [this is nth-child(6)]
    <div class="big-chix">Contento</div> [this is nth-child(7)]
</div>

CSS

.chicken { width:100%; background:#999; float:left; }

.big-chix { width:48%; margin:0.5%; padding:0.5%; background:#666; float:left; }

.big-chix:nth-child(1) { background-color:#eee; }
4

2 に答える 2

9

.big-chix:nth-child() は、すべての .big-chix クラス (6 つの .big-chix) を選択することだけを想定してから、1、3、5 を #eee の背景色に設定します。および 2、4、6 から #aaa?

いいえ。

:nth-child()「セレクターの他の部分にも一致する n 番目の要素」ではなく、「親の n 番目の要素」を選択します。

各セレクターは個別に適用され、すべてのコンポーネントに一致する要素のみが完全なセレクターに一致します。

ただし、:nth-of-type()必要なことを行う必要があることに注意してください。

于 2013-09-03T09:43:33.193 に答える
-2

これらを使用する

.big-chix:nth-child(even) { background-color:#eee; }
.big-chix:nth-child(odd) { background-color:#aaa; }

http://jsfiddle.net/TeqUF/2/で動作します

于 2013-09-03T09:44:57.533 に答える