如何 select 在特定 div 内的 table 内的第一个 TD

Question

我想要 select 我 table 的第一个 td 使用 css select 或者。这是我的 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{

}

这将 select tr 的第一个 child，即 td。这应该能满足您的需求。
希望这有帮助

Answer 3

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

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

您也可以使用“:first-of-type”。

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

Answer 4

试试这个：

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

编码愉快！

Answer 5

试试这个：

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

参见下面的示例：

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

Answer 6

因为您只有一个元素 .mydiv table 只需使用 :first-of-type、nth-child(1) 或 :first-child:

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

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

没有必要在这里使用 !important 这是不好的做法。

如何 select 在特定 div 内的 table 内的第一个 TD

How to select first TD inside table which is inside a particular div

html

css

css-selectors