0

私はすべてのタイトルをdiv太字で赤くしようとしていますが、私が持っているCSSはそれらすべてを太字で赤くしています。私のCSSの何が問題になっていますか?

これがフィドルです。

<div id=foo>
    <div>
        <div>title 1</div>
    </div>
    <div>
        <div>data 1</div>
    </div>
    <div>
        <div>title 2</div>
    </div>
    <div>
        <div>data 2</div>
    </div>
    <div>
        <div>title 3</div>
    </div>
    <div>
        <div>data 3</div>
    </div>
    <div>
        <div>title 4</div>
    </div>
    <div>
        <div>data 4</div>
    </div>
</div>

#foo {
    font-size:8pt;
}
#foo:nth-child(odd):first-child {
    font-weight:bold;
    color:red;
}
4

3 に答える 3

3

セレクター#foo:nth-child(odd):first-childは、両方の疑似クラスを#fooそれ自体に適用します。#fooは確かに最初の子であり、1 は奇数であるため、一致し、フォント スタイルが要素全体とそのコンテンツに適用されます (フォント スタイルが継承されるため) 。

疑似クラスをいくつかの子セレクターで分割する必要があります。

#foo > :nth-child(odd) > :first-child {
    font-weight:bold;
    color:red;
}

タイトルdiv要素が親の唯一の子である場合は、安全に ; に置き換えることができ:first-childますdiv。それぞれの最初のものだけを選択することを確認しても意味がありません。

#foo > :nth-child(odd) > div {
    font-weight:bold;
    color:red;
}

さらに言えば、前述したようにフォント スタイルは継承されるため、> div完全に省略することもできます。

#foo > :nth-child(odd) {
    font-weight:bold;
    color:red;
}

もちろん、最も内側のdiv要素だけが子でない場合は、最後の 2 つのスニペットを無視してかまいません...

于 2013-04-03T16:02:00.030 に答える
1

一緒に実行されるセレクターは、一緒に「AND」されます。その#foo:nth-child(odd):first-childため、ID が 'foo' で、親の奇数の子であり、親の最初の子であるすべての要素に一致します。

スペースで区切られたセレクターは、「の子孫」を>意味し、「の直接の子」を意味します。

もしかして、これのことですか？

#foo > :nth-child(odd) > :first-child {
    font-weight:bold;
    color:red;
}
于 2013-04-03T16:02:57.057 に答える
1 
#foo > div:nth-child(2n+1) {
    font-weight:bold;
    color:red;
}

jsFiddle の例

（または単に#foo > div:nth-child(odd)）

子 div を具体的にターゲットにする必要がある場合はdiv、いずれかのルールの最後に a を追加するだけです。元：#foo > div:nth-child(odd) div

于 2013-04-03T16:06:01.133 に答える