5

我在 CSS 声明优先级方面遇到问题。我的页面包含一个带有规则的外部 CSS 文件和一些内联 CSS 声明，这些声明应该覆盖该规则。据我了解，内联样式声明应该覆盖外部 CSS 声明。但是，当我在 Chrome 中查看该页面时，表格的第二行显示为蓝色，而当它应该显示为内部样式声明中定义的红色时。

我在这里想念什么

这是HTML：

<html>
<head>
    <link rel="stylesheet" href="screen.css" type="text/css" media="screen, projection">
    <style type="text/css">
        td,tr,th
        {
            background: Red;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>11</td>
            <td>22</td>
        </tr>
        <tr>
            <td>aa</td>
            <td>bb</td>
        </tr>
    </table>
</body>
</html>

这是CSS文件的内容：

tbody tr:nth-child(even) td,
tbody tr.even td
{
    background: #e5ecf9;
}
4

2 回答 2

16

在计算哪个规则具有最高特异性时，选择器的数量很重要。

CSS 特异性的两个出色的可视化是http://www.standardista.com/css3/css-specificity/和http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

您应该避免仅仅坚持!important要覆盖的规则（请参阅在 CSS 中使用“！important”的含义是什么？），而是更改选择器以使您的规则与导入的规则具有更多或相同的权重。

例如以下将使所有单元格background:red

thead tr:nth-child(1n) th, tbody tr:nth-child(1n) td {
    background:red;
}
于 2012-08-23T08:53:05.287 回答
2

在这种情况下，更详细的规则将得到它。

在你的 HTML 中试试这个：

<style type="text/css" media="screen, projection">
    tbody tr:nth-child(even) td,
    tbody tr:nth-child(even) tr,
    tbody tr:nth-child(even) th
    {
        background: Red;
    }
</style>

最好的祝福

于 2012-08-23T09:00:12.410 回答