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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 00:25:50  来源:igfitidea点击:

CSS: How to target a specific cell inside a table?

csscss-selectorshtml-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

演示

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但如果要使其具体,可以将其更改.mytabletable.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