html - 如何选择一行中的第一个 TD 元素

Question

我有一些行的表。我想创建一个 CSS，它允许我为具有类的表递归地更改行中第一个TD元素的颜色。TRmytable

你能给我一个CSS样本吗？

<table class="mytable">
    <tr>
        <td>Event Title:</td><!--Change color here-->
        <td>{EventTitle}</td>
    </tr>
    <tr>
        <td>Start date:</td><!--Change color here-->
        <td>{DateTimeStart}</td>
    </tr>
    <tr>
        <td>End date:</td><!--Change color here-->
        <td>{DateTimeEnd}</td>
    </tr>
</table>

Answer 1

为此，您可以使用:first-child属性。像这样写：

.mytable td:first-child{
 color:red;
}

Answer 2

使用 CSS “first-child”元素：http ://www.w3schools.com/cssref/sel_firstchild.asp

所以可以这样做：

.mytable td:first-child {
   something here
}

Answer 3

:first-child在 IE 中不起作用，一种实用的方法是更改td​​要应用背景的这些th，然后设置它们的样式

Answer 4

正如@sandeep 所写，您可以使用第一个孩子来实现目标。如果可能的话，更好的方法是将类名添加到您的第一个 td. 如果这应该是标题，您可能还想使用 th 而不是 td

Answer 5

你可以试试这个：

HTML

<table class="mytable">
                <tr>
                        <td>Event Title:</td><!--Change color here-->
                        <td>{EventTitle}</td>
                </tr>
                <tr>
                        <td>Start date:</td><!--Change color here-->
                        <td>{DateTimeStart}</td>
                </tr>
                <tr>
                        <td>End date:</td><!--Change color here-->
                        <td>{DateTimeEnd}</td>
                </tr>
        </table>

CSS

.mytable tr td:first-child{
 color:red;
}

http://jsfiddle.net/hrBAn/1/

Answer 6

Sandeep 的想法是正确的，但您似乎要求的是更具体的样式规则。尝试这个：

table.mytable td:first-child {}