html - css の div に代わる行の色

Question

を使用して、div に別の行の色を追加しようとしていnth-child(odd)ます。

クラス名を持つ div の代替色を追加する必要がありますalternative_clsが、別のクラス名を持つ div には追加しません。

しかし、問題は、別のクラス名で div をスキップしていないことです。別の色が div という名前の別のクラスも含めて適用されています。

ここにコードフィドルがあります

私が欲しいのは

Answer 1

どうぞhttp://jsfiddle.net/Dfy59/6/

説明：

定義上、CSSn-th:childセレクター

型に関係なく、親の n 番目の子であるすべての要素に一致します。

コードを例に取りましょう (最初に no_bg ノードを削除します):

.alternative_cls:nth-child(odd){
    background:#ccc;
}

次のように適用されます。

<div class="alternative_cls"> <!-- alternative_cls(n)=1, odd so apply = (grey) -->
    ssf
</div>
<div class="alternative_cls"> <!-- alternative_cls(n)=2, even so don't apply = (transparent) -->
    ssf
</div>
<div class="alternative_cls"> <!-- alternative_cls(n)=3, odd so apply = (grey)-->
    ssf
</div>
<div class="alternative_cls"> <!-- alternative_cls(n)=4, even so don't apply = (transparent) -->
    ssf
</div>
..
etc

間に別のクラスを持つ div を挿入すると、混乱が発生します。その場合、css は引き続き侵入者 div を の兄弟としてカウントし.alternative_clsますが、css をそれに適用しません。

<div class="alternative_cls">  <!-- alternative_cls(n)=1, odd so apply = (grey) -->
    ssf
</div>
<div class="no_bg">  <!--alternative_cls(n)=2, but don't apply alternative_cls, just apply no_bg = (pink) -->
    ssf
</div>
<div class="alternative_cls">  <!-- n=3, odd so apply = (grey) NOTE: you'd expect the nth-child selector to skip the last node.. but it didn't, which caused the confusion -->
    ssf
</div>
<div class="alternative_cls"> <!-- n=2, even so don't apply = (transparent) -->
    ssf
</div>
<div class="alternative_cls">  <!-- n=3, odd so apply = (grey)-->
    ssf
</div>
<div class="alternative_cls">  <!-- n=4, even so don't apply = (transparent) -->
    ssf
</div>

私がこれを知った方法は、Chrome 開発ツールを見て、jquery セレクターをいじることです。

$('.alternative_cls:nth-child(1)')

戻り値

[<div class="alternative_cls">
    ssf
</div>]

しかし（そしてこれは直感に反する部分です）

$('.alternative_cls:nth-child(2)')

戻り値

[]

このセレクターが no_bg div.. の直後にノードを返すことを期待するでしょうが、そうではありません!

続き..

 $('.alternative_cls:nth-child(3)')

戻り値

[<div class="alternative_cls">
    ssf
</div>]

（コンセプトを理解するために、これを自分で試してみることをお勧めします）

これを回避するには、CSSを次のように設定するだけです

.alternative_cls{
    width:100%;
    height:60px
}
.alternative_cls:nth-child(1), .alternative_cls:nth-child(even){
    background:#ccc;
}
.no_bg{
     width:100%;
    height:60px;
    background:#f8d6d6
}

そしてこれが起こる

<div class="alternative_cls">  <!-- n=1, apply the nth-child(1) rule = (grey) -->
    ssf
</div>
<div class="no_bg">   <!--alternative_cls(n)=2, but don't apply alternative_cls, just apply no_bg = (pink) -->
    ssf
</div>
<div class="alternative_cls">  <!-- n=3, odd, so don't apply any rule = (transparent)-->
    ssf
</div>
<div class="alternative_cls"> <!-- n=2, even so apply the nth-child(even) rule = (grey) -->
    ssf
</div>
<div class="alternative_cls">  <!-- n=3, odd, so don't apply any rule = (transparent)-->
    ssf
</div>
<div class="alternative_cls">  <!-- n=4, even so apply the nth-child(even) rule = (grey) -->
    ssf
</div>

これで明確になることを願っています..この知識があれば、n番目の子セレクターを引き続き使用できます。この特異性を説明する必要があります

Answer 2

これは必要なものに対して機能していますか?:

.alternative_cls:first-child,
.alternative_cls:nth-child(2n){
  background:#ccc;
}

jsフィドル

Answer 3

.no_bg divを.alternative_clsに移動しましたが、正常に機能しています。

<div class="alternative_cls">
    ssf
    <div class="no_bg">
    ssf
</div>
</div>
<div class="alternative_cls">
    ssf
</div>
<div class="alternative_cls">
    ssf
</div>
<div class="alternative_cls">
    ssf
</div>
<div class="alternative_cls">
    ssf
</div>

デモ

Answer 4

他の回答で既に述べたように、nth-child セレクターは子をカウントします。それだけです。それを変えるために何でもできます。すでに述べたように、最初のレベルの子の外で問題を引き起こす div を取ることができます。

これが問題になる場合は、その要素をdiv以外の別の型に変更することもできます。次に、 divのみをカウントするdiv:nth-of-type(even)を使用できます。

いずれにせよ、何らかの方法で DOM を変更する必要があります。