表格第一行第一列的 CSS 选择（不包括嵌套表格）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7232813/
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 selection of first column of first row of a table (excluding nested tables)
提问by Roly
I'm having difficulty with CSS selectors and I hope someone can perhaps help me out here.
我在使用 CSS 选择器时遇到了困难，我希望有人能在这里帮助我。
I have some HTML that looks like so:
我有一些看起来像这样的 HTML：
<table class=myTable>
<tr>
<td>this is the td of interest</td>
</tr>
<tr>
<td>
<table>
<tr><td>I don't want this td!</td></tr>
</table>
</td>
</tr>
</table>
I am trying to apply a background image to the FIRST td of the FIRST tr. So I tried the following:
我正在尝试将背景图像应用于 FIRST tr 的 FIRST td。所以我尝试了以下方法：
table.myTable tr:first-child td:first-child {
background-image: url(someUrl.gif);
}
But this is also finding the first td of the first tr of the nested table. I've tried different combinations with > and +, but no luck. Anyone have any ideas?
但这也是在查找嵌套表的第一个 tr 的第一个 td。我尝试了 > 和 + 的不同组合，但没有运气。谁有想法？
Note: I'm aiming for a solution that is compatible with IE7+.
注意：我的目标是与 IE7+ 兼容的解决方案。
回答by ThatMatthew
The selector you need is
您需要的选择器是
table.myTable > tbody > tr:first-child > td:first-child
There is an implicit TBODY element in there, even though you don't have it in the code.
那里有一个隐式 TBODY 元素，即使您在代码中没有它。
回答by George Kastrinis
table.myTable > tr:first-child > td:first-child
The > means the tr that is a direct child of table
> 表示作为 table 的直接子项的 tr
回答by Psyrus
Not that speed is really a problem for the average website in this day and age, but, worth a note.
对于当今这个时代的普通网站来说，速度并不是真正的问题，但是，值得注意的是。
tags are slower to find than classes and classes are slower to find than id's.
标签的查找速度比类慢，而类的查找速度比 id 慢。
So for simplicity and speed, how about just assigning an id to the element in question and applying a style to the id?
因此，为了简单和速度，只为相关元素分配一个 id 并将样式应用于该 id 怎么样？
回答by Flavio Sousa
This work for me:
这对我有用：
table.myClass > tbody:first-of-type > tr > td:first-child
table.myClass > tbody:first-of-type > tr > td:first-child
回答by Chris
table.myTable > tbody tr > td:first-child
For first column.
对于第一列。
回答by Arthur Savage
table.table td:nth-child(1) {text-align: center; font-weight: bold;}
table.table td:nth-child(1) {text-align: center; 字体粗细：粗体；}
回答by Pavel
table.myTable > tr:first-child > td:first-child
table.myTable > tr:first-child > td:first-child
This code is difficult to support. Try the following instead:
这段代码很难支持。请尝试以下操作：
<table class="myTable">
<tr>
<td class="verySpecialCell">this is the td of interest</td>
</tr>
<tr>
<td>
<table>
<tr><td>I don't want this td!</td></tr>
</table>
</td>
</tr>
</table>
or even
甚至
<table class=myTable>
<tr>
<td>
<div class="verySpecialContent">
this is the td of interest
</div>
</td>
</tr>
<tr>
<td>
<table>
<tr><td>I don't want this td!</td></tr>
</table>
</td>
</tr>
</table>
回答by Srinivasan.S
The following code may help you,
以下代码可能对您有所帮助，
HTML Code:
HTML代码：
<table id="myTableId" class="myTableClass">
<tr>
<th>S.No</th>
<th>Name</th>
</tr>
</table>
CSS Code:
CSS 代码：
Using table id:
使用表 ID：
table[id="myTableId"] > tr:first-child > th:first-child{
}
Using table class:
使用表类：
table[class="myTableClass"] > tr:first-child > th:first-child{
}
or
或者
table.myTableClass > tr:first-child > th:first-child{
}
or
或者
table.myTableClass tr:first-child > th:first-child{
}
