有没有办法选择匹配(或不匹配)任意选择器的每个第n个孩子?例如,我想选择每个奇数表行,但是在行的子集中:
table.myClass tr.row:nth-child(odd) {
...
}
Run Code Online (Sandbox Code Playgroud)
<table class="myClass">
<tr>
<td>Row
<tr class="row"> <!-- I want this -->
<td>Row
<tr class="row">
<td>Row
<tr class="row"> <!-- And this -->
<td>Row
</table>
Run Code Online (Sandbox Code Playgroud)
但:nth-child()似乎只计算所有tr元素,无论它们是否属于"行"类,所以我最终得到一个偶数 "行"元素而不是我正在寻找的两个元素.同样的事情发生在:nth-of-type().
有人可以解释原因吗?
我有以下标记:
<div class="foo">
<ul>
<li>one</li>
<li>two</li>
</ul>
<ul>
<li>three</li>
</ul>
<ul>
<li>four</li>
</ul>
</div>
Run Code Online (Sandbox Code Playgroud)
我希望风格"一"和"三".
但是,标记也可以是:
<div class="foo">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<ul>
<li>four</li>
</ul>
</div>
Run Code Online (Sandbox Code Playgroud)
我尝试过使用以下CSS:
.foo li:nth-child(1),
.foo li:nth-child(3)
{
color:red;
}
Run Code Online (Sandbox Code Playgroud)
然而,正如预期的那样,这是造型的第一个孩子ul.(演示:http://jsfiddle.net/hTfVu/)
如何更改我的CSS以便我可以定位第1和第3 li属于.foo?