0

我正在尝试根据它们所在的 DIV 分隔两个表的 CSS 属性。如果您查看http://jsfiddle.net/jdb1991/tpXKT/，您会看到“resultA”中的表正在使用 TD 属性为“结果B”定义。

我知道这是由于属性的“级联”而应用的，但是如果我使用了#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>
4

2 回答 2

2

这是因为你自己定义td了两次。也就是说，选择器#resultB table th在此处结束，当您使用逗号包含时，td您只是将其定义td为独立元素。你需要做： #resultA table th, #resultA table td并#resultA table th, #resultA table td为每一个获得不同的风格。

于 2012-12-24T15:41:08.170 回答
2

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

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

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

jsFiddle 示例

于 2012-12-24T15:41:21.560 回答