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 td
element which is nested under 1st tr
element which is further nested under tbody
which is further nested under ANY element having class .mytable
but obviously, tbody
will be used inside a table
but if you want to make it specific, you can change this .mytable
to 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 nth
instead of first-child
说明:同上,使用nth
代替first-child