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

Question

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

你能给我一个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

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

Answer 4

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

table.mytable td:first-child {}

Answer 5

:first-child不能在IE工作，切实可行的办法是改变这些td ，你是要去后台申请th ，然后他们的风格

Answer 6

你可以试试这个：

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/