CSS:如何定位表格内的特定单元格?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/18846271/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: How to target a specific cell inside a table?
提问by MrQ
I have a dynamically generated table and I need to style differently the 5th cell from the first row of that table.
我有一个动态生成的表格,我需要为该表格第一行的第 5 个单元格设置不同的样式。
I′m able to style the first row via:
我可以通过以下方式设置第一行的样式:
//table.css
.mytable tbody tr:first-child { whatever styles I define.. }
Or the 5th column via:
或第 5 列通过:
.mytable tbody td:nth-child(5) { whatever styles I define.. }
I tried to combine this two selectors so that the cell in the 1st row, 5th column is different but without success. How can I achieve this?
我试图组合这两个选择器,以便第一行第五列中的单元格不同但没有成功。我怎样才能做到这一点?
回答by Mr. Alien
You can simply use the below selector
您可以简单地使用下面的选择器
Demo 2(Multiple Rows)
演示 2(多行)
.mytable tbody tr:first-child td:nth-child(5) {
/* Styles goes here */
}
Explanation : The above selector selects 5th tdelement which is nested under 1st trelement which is further nested under tbodywhich is further nested under ANY element having class .mytablebut obviously, tbodywill be used inside a tablebut if you want to make it specific, you can change this .mytableto table.mytable
说明:上面的选择器选择td嵌套在第一个tr元素下的第5 个元素,该元素进一步嵌套在tbody具有类的任何元素下,.mytable但显然,tbody将在 a 中使用,table但如果要使其具体,可以将其更改.mytable为table.mytable
Or you can use
或者你可以使用
.mytable tbody tr:nth-child(1) td:nth-child(5) {
/* Styles goes here */
}
Explanation: Same as above, using nthinstead of first-child
说明:同上,使用nth代替first-child

