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.. }

我尝试将这两个选择器组合在一起,以便第1行,第5列中的单元格不同,但没有成功.我怎样才能做到这一点？

Answer 1

您只需使用以下选择器即可

演示

演示2(多行)

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

说明:上面的选择器选择td嵌套在第一个tr元素下面的第五个元素,它进一步嵌套在tbody其下进一步嵌套在具有类的任何元素下.mytable但很明显,tbody将在一个内部使用table但如果你想使它具体,你可以将其更改.mytable为table.mytable

或者你可以使用

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

说明:与上面相同,使用nth而不是first-child