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

问题描述：

我试图使所有的标题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; 
}

答

的选择#foo:nth-child(odd):first-child既适用伪类#foo本身。由于#foo确实是第一个孩子，1是奇数，所以它匹配，导致字体样式适用于整个元素及其内容（因为字体样式是继承的）。

你需要一些孩子选择拆分伪类：

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

如果标题div元素是其父母的独生子女，那么你可以放心地div取代:first-child;有在做没有意义确保你只选择第一个每个：

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

对于这个问题，因为字体样式继承正如我所说，你甚至可以离开了> div完全：

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

当然，随意忽略最后两个片段，如果最内层div元素不是唯一的孩子......

答

选择器一起运行的“相与”在一起。所以#foo:nth-child(odd):first-child将匹配所有那些ID为'foo'且是他们父母的单亲孩子并且是他们父母的第一个孩子的元素。

由空格分隔的选择器意味着“某些后裔”，并由>表示“直接子女”。

您是否也许认为这是？

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

答

#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

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

相关推荐