Html 使用CSS3选择器以特定表为目标

是否可以使用第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>

#div表：第n个子项（2）{
颜色：蓝色
}
表1
表2

您的问题可能与无效的html有关。您需要将文本包装在

td

中

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

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

表1
表2

还要确保没有重复的id

---

还有一点需要注意的是，只有当您的表是div的第二个子表时，这才有效。如果您想将第二个表作为其父表中的目标，则需要使用类型（2）的第n个

问题是
无效
HTML

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

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

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


表1

您的HTML无效，除非该文本（实际上）被包装在
或
元素中，否则浏览器将尝试通过将文本移到
元素之外来修复无效的HTML。