css - 如何选择这个 td 元素？

Question

我需要选择其中值为 2 的 td 元素。我怎么能用纯 CSS 做到这一点？

<tr class="Foobar">
   <td>1</td>
   <td>2</td>
   <td>3</td>
</tr>

谢谢！

Answer 1

我建议，假设它是td您要选择的第二个元素（而不是任何 td包含 number 的元素2）：

tr.Foobar td:nth-of-type(2) {
    /* your CSS */
}

JS 小提琴演示。

tr.Foobar td:nth-child(2) {
    /* your CSS */
}

JS 小提琴演示。

如果您需要支持较旧的浏览器，而不支持:nth-of-type()or :nth-child()，那么您可以使用：

tr.Foobar td:first-child + td {
    /* your CSS */
}

JS 小提琴演示。

参考：

• CSS 选择器。