有没有办法选择匹配(或不匹配)任意选择器的每个第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().
有人可以解释原因吗?
是否可以编写CSS规则来选择没有特定类的元素的第一个子元素?
例:
<div>
<span class="common-class ignore"></span>
<span class="common-class ignore"></span>
<span class="common-class"></span>
<span class="common-class"></span>
</div>
Run Code Online (Sandbox Code Playgroud)
在这种情况下,我想选择第一个span没有课程ignore.我试过这个,但似乎没有用:
.common-class:first-child:not(.ignore) {
...some rules...
}
Run Code Online (Sandbox Code Playgroud)
更新:
如果我向一个名为父div的类添加一个类,那么parent-classJukka建议的选择器的修改版本可以工作,除非第一个span类ignore在第一个没有之后.上述选择器如下:
.parent-class > .common-class.ignore + .common-class:not(.ignore) {
...some rules...
}
Run Code Online (Sandbox Code Playgroud)