Question

这是我在FireFox和Chrome中看到的令人困惑的行为：我有一个HTML文件，其中包含来自两个CSS文件的样式。有时样式适用于第二个文件，有时适用于第一个文件。可以在以下示例中看到奇怪的行为：

HTML文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="cssTHTDquestion1.css"/>
<link rel="stylesheet" href="cssTHTDquestion2.css"/>
</head>
<body>
<table>
<tr><th>header 1</th><th>header 2</th><th>header 3</th></tr>
<td>data 1</td><td>data 2</td><td>data 3</td></table>
</body>
</html>

cssTHTDquestion1.css：

table th,table td{
    background-color:red;
}

cssTHTDquestion2.css：

th,td{
    background-color:green;
}

现在我希望看到这个输出（因为cssTHTDquestion2.css包含在cssTHTDquestion1.css之后）：

enter image description here

但我得到了这个（这意味着cssTHTDquestion1.css中的样式具有更高的优先级，即使cssTHTDquestion2.css设置了最新的设置）：

enter image description here

甚至Firebug（非常意外）显示应用了cssTHTDquestion1.css中的设置：

enter image description here

为了解决这个问题，我可以将cssTHTDquestion2.css更改为：

table th,table td{
    background-color:green;
}

但为什么将th,td更改为table th,table td会更改优先级？我在这里想念的是什么？为什么从cssTHTDquestion1.css而不是cssTHTDquestion2.css应用颜色？后来包含了cssTHTDquestion2.css（在HTML代码中），所以我认为它具有更高的优先级。

Answer 1

table td比td更具体。

如果您不理解它，请尝试描述选择器，这看起来很明显：
table td =选择<td>的孩子<table> td =选择任何<td>。

有关特定性的基本理解，请参阅http://www.w3.org/TR/css3-selectors/#specificity。

Answer 2

这与CSS特异性有关。每个元素选择器都是1个点，所以你的第一个选择器是2个点，但是你的第二个选择器只有1个点。这就是为什么第一个“获胜”。

table th = 2p
th       = 1p

Chris Coyier has a great article on this.

Answer 3

根据特异性计算选择cssTHTDquestion1.css文件中的规则。点击http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

了解详情

是不是应该从最新设置应用CSS规则？

3 个答案: