如何调整下面的 CSS 选择器:
.myTableRow td:nth-child(?){
background-color: #FFFFCC;
}
所以它适用于td
列2
~4
?
<table>
<tr class="myTableRow">
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
<td>column 4</td>
<td>column 5</td>
</tr>
</table>
您可以使用的另一种方法是:
.myTableRow td:nth-child(n+2):nth-child(-n+4){
background-color: #FFFFCC;
}
这更清楚一点,因为它包括您范围内的数字(2
and 4
) 而不必从末尾倒数。
它也更加稳健,因为您不必考虑项目的总数。
为了澄清:
:nth-child(n+X) /* all children from the Xth position onward */
:nth-child(-n+x) /* all children up to the Xth position */
Example:
#nn div {
width: 40px;
height: 40px;
background-color: black;
display: inline-block;
margin-right: 10px;
}
#nn div:nth-child(n+3):nth-child(-n+6) {
background-color: blue;
}
<div id="nn">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)