我可以组合：nth-child（）或：nth-of-type（）与任意选择器？有没有办法选择匹配（或不匹配）任意选择器的每个第n个孩子？例如，我想选择每个奇数表行，但是在行的子集中：table.myClass tr.row:nth-child(odd) {
...}<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>但:nth-child()似乎只计算所有tr元素，无论它们是否属于“行”类，所以我最终得到一个偶数“行”元素而不是我正在寻找的两个元素。同样的事情发生在:nth-of-type()。有人可以解释原因吗？
5 回答
呼啦一阵风
TA贡献1802条经验 获得超6个赞
您可以使用xpath执行此操作。//tr[contains(@class, 'row') and position() mod 2 = 0]可能有用的东西。还有其他SO问题扩展到如何更准确地匹配类的细节。
墨色风雨
TA贡献1853条经验 获得超6个赞
这是你的答案
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TEST</title>
<style>
.block {
background: #fc0;
margin-bottom: 10px;
padding: 10px;
}
/* .large > .large-item:nth-of-type(n+5) {
background: #f00;
} */
.large-item ~ .large-item ~ .large-item ~ .large-item ~ .large-item {
background: #f00;
}
</style></head><body><h1>Should be the 6th Hello Block that start red</h1><div class="small large">
<div class="block small-item">Hello block 1</div>
<div class="block small-item large-item">Hello block 2</div>
<div class="block small-item large-item">Hello block 3</div>
<div class="block small-item large-item">Hello block 4</div>
<div class="block small-item large-item">Hello block 5</div>
<div class="block small-item large-item">Hello block 6</div>
<div class="block small-item large-item">Hello block 7</div>
<div class="block small-item large-item">Hello block 8</div></div></body></html>- 5 回答
- 0 关注
- 793 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消