使用 CSS3 选择器定位特定表答案

【问题标题】：Target a specific table using CSS3 selector使用 CSS3 选择器定位特定表
【发布时间】：2014-08-28 11:07:05
【问题描述】：

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

【问题讨论】：

您的 HTML 无效，除非该文本（真的）包含在 <td> 或 <th> 元素中，否则浏览器将尝试通过将文本移出 @987654324 来修复无效的 HTML @元素。

标签： html css css-selectors

【解决方案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)

【讨论】：

【解决方案2】：

问题是你的invalid HTML

值或项目或内容应在td 内。

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

DEMO

【讨论】：