Question

我遇到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;
}

Answer 1

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

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

您应该避免仅将!important放在要覆盖的规则上（请参阅What are the implications of using "!important" in CSS?），而是更改选择器以使您的规则对导入的规则具有更多或相等的权重。

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

thead tr:nth-child(1n) th, tbody tr:nth-child(1n) td {
    background:red;
}

Answer 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>

祝你好运

Css风格优先

2 个答案: