Question

我正在努力使所有标题div变为粗体和红色，但我所拥有的css使所有标题都变得大胆和红色。我的CSS有什么问题？

这是fiddle。

<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

一起运行的选择器是＆＃34; ANDed＆＃34;一起。因此#foo:nth-child(odd):first-child将匹配所有具有ID＆＃39; foo＆＃39;并且是他们父母的一个奇怪的孩子，并且是他们父母的第一个孩子。

以空格分隔的选择器意味着＆＃34;＆＃34;的某些后代，以及>的意思＆＃34;＆＃34;的直接子项。

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

#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 example

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

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

如何正确选择每个奇怪孩子的第一个孩子？

3 个答案: