1

セレクターについてCSS3の専門家に簡単な質問がありnth-childます（ここでは非常にn00bです）

次の単純なhtmlコードがあります。

<div>1</div>
<div>2</div>
<div>3</div>
<span>span3</span>
<div>4</div>
<div>5</div>

css スタイル:

div:nth-child(2n+1) {
    color: red;
}

div, span {
    float: left;
}

私はあなたのためにフィドルを作成しました：http://jsfiddle.net/Q8aPe/

結果は次のとおりです。

123span345ここで、1、3、4、および 5 は赤で表示されます。

私が期待しているのは1,3,5、赤くなることです。

なんで ？nth-childタグ子を気にしませんか？それとも要素を参照するだけですか（タグの種類は関係ありません）？

ありがとう

4

2 に答える 2

5

nth-childその通りです。すべての兄弟間の要素の位置に基づいて決定します。必要なのはnth-of-type、潜在的なすべての css 一致の中で要素の位置に基づいていることです。

http://jsfiddle.net/Q8aPe/1/

div:nth-of-type(2n+1) {
    color: red;
}
于 2013-11-08T14:40:20.310 に答える
3

:nth-of-type()の代わりに使用してみてください:nth-child()

于 2013-11-08T14:39:26.240 に答える