CSS 样式优先级答案

【问题标题】：Css style priorityCSS 样式优先级
【发布时间】：2018-09-30 02:47:45
【问题描述】：

我在 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;
}

【问题讨论】：

你应该避免 !important - 见stackoverflow.com/questions/3706819/…

标签： html css css-selectors

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

【讨论】：

@Raisch 是的，谢谢。发现，只是在本地测试正确的选择器:-)

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

最好的问候

【讨论】：

代码有误导性，因为,tr,th部分没有影响，其作用很容易被误解。这里重要的是使用足够大的特异性对某些 td 元素进行设置。
@JukkaK.Korpela - 我知道，我只是扩展了他自己的 CSS 块。 :-)
@JukkaK.Korpela 6 年后更新了我的答案！ :-)