我可以組合：nth-child（）或：nth-of-type（）與任意選擇器？有沒有辦法選擇匹配（或不匹配）任意選擇器的每個第n個孩子？例如，我想選擇每個奇數(shù)表行，但是在行的子集中：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元素，無論它們是否屬于“行”類，所以我最終得到一個偶數(shù)“行”元素而不是我正在尋找的兩個元素。同樣的事情發(fā)生在:nth-of-type()。有人可以解釋原因嗎？
5 回答
呼啦一陣風
TA貢獻1802條經(jīng)驗 獲得超6個贊
您可以使用xpath執(zhí)行此操作。//tr[contains(@class, 'row') and position() mod 2 = 0]可能有用的東西。還有其他SO問題擴展到如何更準確地匹配類的細節(jié)。
墨色風雨
TA貢獻1853條經(jīng)驗 獲得超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>添加回答
舉報
0/150
提交
取消