Question

是否可以使用第n个子选择器来定位其父元素中的特定表？

我正在尝试将div中的第二个表作为目标，但它似乎不起作用：

#div table:nth-child(2) {
    color: blue
}
<div id="div">
    <table>
        <tr>Table 1</tr>
    </table>
    <table>
        <tr>Table 2</tr>
    </table>
</div>

Answer 1

你的问题可能是无效的html。您需要将文本包装在td。

中

<div id="div">
    <table>
        <tr><td>Table 1</td></tr>
    </table>
    <table>
        <tr><td>Table 2</td></tr>
    </table>
</div>

另外请确保您没有重复ID。

<强> Here's a working CodePen demo

还有一点需要注意的是，只有当你的桌子是div的第二个孩子时，这才有效，如果你想在其父级中定位第二个桌子，你需要使用nth-of-type(2)

Answer 2

问题在于您的invalid HTML

值或项目或内容应位于td内。

     <table>
        <tr>
        <td>Table 1</td>
        </tr>
    </table>

DEMO

使用CSS3选择器定位特定表

2 个答案: