Question

我正在尝试将两个表的CSS属性分开，这取决于它们所在的DIV。如果查看http://jsfiddle.net/jdb1991/tpXKT/，您会看到“resultA”中的表正在使用为“resultB”定义的TD属性”

据我所知，由于属性的“级联”，已经应用了这个，但是如果我使用了#resultB选择器，为什么还要包含它？或者这是无效的吗？

对于Stack的幸福：

#resultA table {border-collapse: collapse}
#resultA table th, td {border: 1px solid black}
#resultA table td {background-color: blue}

#resultB table {border-collapse: collapse}
#resultB table th, td {border: 5px solid black}
#resultB table td {background-color: red}

<div id="resultA">
    <table>
        <tr>
            <th>Result</th>
        </tr>
        <tr>
            <td>11.5</td>
        </tr>
    </table>
</div>

Answer 1

这是因为你自己定义td两次。也就是说，选择器#resultB table th在那里结束，当您使用逗号包含td时，您只是将td定义为独立元素。你需要这样做： #resultA table th, #resultA table td和#resultA table th, #resultA table td为每个人获取不同的样式。

Answer 2

CSS中的逗号分隔选择器，并且它们之间没有任何关系。因此，#resultB table th, td自#resultA table th, td之后，td规则被最后一条规则覆盖，因为它是最后一条规则。你可能想要这样做：

#resultB table th, #resultB table td {border: 5px solid black}

通过专门定义规则的路径，确保它不会应用于其他元素。

<强> jsFiddle example

使用div来定义CSS属性

2 个答案: