css - 如何正确选择每个奇数孩子的第一个孩子？

Question

我正在尝试使所有标题都变成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;
}

Answer 1

选择器#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元素不是唯一的孩子，请随意忽略最后两个片段......

Answer 2

一起运行的选择器被“与”在一起。因此，#foo:nth-child(odd):first-child将匹配所有具有 ID 'foo' 并且是其父级的奇数子级并且是其父级的第一个子级的元素。

用空格分隔的选择器表示“的某些后代”，并>表示“的直接子代”。

你的意思是，也许，这个？

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

Answer 3

#foo > div:nth-child(2n+1) {
    font-weight:bold;
    color:red;
}

jsFiddle 示例

（或只是#foo > div:nth-child(odd)）

请注意，如果您需要专门针对子 div，只需div在任一规则的末尾添加一个。前任：#foo > div:nth-child(odd) div