CSS 2，使用链接元素导入的样式表的优先级答案

【问题标题】：CSS 2, precedence of stylesheets imported using link elementCSS 2，使用链接元素导入的样式表的优先级
【发布时间】：2009-06-08 10:54:19
【问题描述】：

给定

<link rel="STYLESHEET" href="/css/t.cake.css" type="text/css"/>
<link rel="STYLESHEET" href="/css/f.css" type="text/css"/>
<link rel="STYLESHEET" href="/css/t.generic.css" type="text/css"/>
<link rel="STYLESHEET" href="/css/t.head.css" type="text/css"/>

哪些规则在级联中具有更高的优先级？假设所有其他 CSS 比较都具有相同的优先级？第一个或最后一个样式表中的那些？

TIA 戴夫P

【问题讨论】：

标签： css

【解决方案1】：

根据the specs，应用最新的。

4. 最后按指定顺序排序：如果两个声明具有相同的权重、来源和特异性，则后者指定获胜。导入样式表中的声明被认为在样式表本身的任何声明之前。

无论如何，单独依赖它并不是一个好习惯，因为它会使您的代码难以阅读和解释。我会确保通过选择器的specificity 应用正确的规则，无论它们放在什么样式表中。

【讨论】：

【解决方案2】：

样式表按链接顺序下载和应用，即：

t.cake.css
f.css //将覆盖上面样式表的冲突规则
t.generic.css //将覆盖上面两个样式表的冲突规则
t.head.css //将覆盖上面三个样式表的冲突规则

【讨论】：

我得到的结果是相反的；对我来说，使用了多个样式表（css 文件）中的第一个。除非它们后面有样式标签，否则最后一条规则（在样式标签中）获胜。
@user34660 要么你有一个不符合规范的浏览器，要么我不理解你。应用所有规则，但后面的 props 会覆盖早期规则中的 props。

【解决方案3】：

最后的样式优先！但你可以使用：

.nameclass{
   font-size:11px !important;
}

【讨论】：

【解决方案4】：

内联样式的优先级最高。来自外部样式表的样式规则遵循一个简单的公式（参见http://www.htmldog.com/guides/cssadvanced/specificity/）

关于表格的顺序，如果发生碰撞，最后一张表格中的规则将优先（除非您使用 !important 标志）

编辑：更好地参考特异性http://css-tricks.com/specifics-on-css-specificity/

【讨论】：