如何选择特定div内的第一个TD内部表

Question

我想使用css选择器选择我的表的第一个 td 。 这是我的Html代码。

<div class="mydiv">
    <table class="mytable">
        <tbody>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>

这是我的CSS代码 第一次尝试。

 div.mydiv > table > tbody > tr > td 
    {
        width:25px ;
    }

第二次尝试

div.mydiv > table  > tr > td 
{
    width:25px ;
}

似乎没有人在工作。

问候。

Answer 1

试试这个：

div.mydiv > table > tbody > td:first-of-type {
    width:25px !important
}

Answer 2

div.mydiv > table > tbody > tr > td:first-child{

}

这将选择tr的第一个孩子td。这应该给你你需要的东西 希望这有帮助

Answer 3

由于您只有一个元素.mydiv表，因此只需使用:first-of-type，nth-child(1)或:first-child：

＆＃13;

＆＃13;

div.mydiv td:first-of-type {
    width:25px
}

＆＃13;

<div class="mydiv">
    <table class="mytable">
        <tbody>
            <tr>
                <td>a</td>
                <td>b</td>
                <td>c</td>
                <td>d</td>
            </tr>
        </tbody>
    </table>
</div>

＆＃13;

＆＃13;

＆＃13;

这里不需要使用!important这是不好的做法。

Answer 4

您可以使用:first-child伪选择器：

tr td:first-child
{
    /* styles */
}

你也可以使用'：first-of-type'。

参考：http://www.w3.org/TR/css3-selectors/#selectors

Answer 5

试试这个：

table.myTable > tbody > tr:first-child > td:first-child {
    width:25px !important;
}

快乐的编码！

Answer 6

试试这个：

div.mydiv table.mytable tr > td:first-child {
    width:25px !important;
    color: #ff0000;
}

见下面的例子：

http://jsfiddle.net/kb3gN/8866/