html - 如何在特定 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

因为您只有一个元素 .mydiv 表，只需使用 :first-of-type、nth-child(1) 或 :第一个 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，这是不好的做法。