css - CSS：如何定位表格中的特定单元格？

Question

我有一个动态生成的表格，我需要对该表格第一行的第 5 个单元格进行不同的样式设置。

我可以通过以下方式设置第一行的样式：

//table.css

.mytable tbody tr:first-child { whatever styles I define.. }

或通过第 5 列：

.mytable tbody td:nth-child(5) { whatever styles I define.. }

我试图组合这两个选择器，以便第一行第五列中的单元格不同但没有成功。我怎样才能做到这一点？

Answer 1

您可以简单地使用下面的选择器

演示

演示 2（多行）

.mytable tbody tr:first-child td:nth-child(5) {
   /* Styles goes here */
}

说明：上面的选择器选择第 5 个td元素，该元素嵌套在第 1个tr元素下，该元素进一步嵌套在该元素下tbody，该元素进一步嵌套在具有类的任何元素下，.mytable但显然，tbody将在 a 中使用，table但如果您想使其具体，您可以将其更改.mytable为table.mytable

或者你可以使用

.mytable tbody tr:nth-child(1) td:nth-child(5) {
   /* Styles goes here */
}

说明：同上，用nth代替first-child