css样式表定义的顺序是否重要?

时间:2012-02-10 16:57:53

标签: css stylesheet

我有几个样式表。第一个是样式表,其中包含一些我希望用作默认值的样式。根据几个因素,用于生成页面的代码可能包含一些样式表,其值应覆盖默认值。

如果我使用它,我可以相信默认样式表中的值会被其他样式表中的值覆盖吗?我正在使用类选择器,并在名称匹配时覆盖值。

<link href="defaults.css" rel="stylesheet" type="text/css"/> 
<link href="valuestooverridedefaults.css" rel="stylesheet" type="text/css"/> 

这需要适用于所有浏览器,包括移动设备。如果可能的话,我想避免使用“!important”。

谢谢!

7 个答案:

答案 0 :(得分:18)

有一个已定义的cascade,其中的样式已经过排序和应用。 当声明具有相同的重要性(权重) origin 特定时,后一声明获胜。大多数答案涵盖重要性特定,但不包括原产地

以下是关于CSS Cascades的一些非常好的幻灯片。

答案 1 :(得分:3)

  

如果我使用它,我可以相信默认样式表中的值   将被其他样式表中的值覆盖?我在用   类选择器,并在名称匹配时覆盖值。

正如您所指出的那样,当第二张纸上的选择器与第一张纸上的选择器相同时,答案为“是”。

!important的使用将是例外,因此请避免使用它,正如您所指出的那样。

答案 2 :(得分:3)

如果选择器相同,则最后一次加载优先,就像在同一样式表中两次声明相同的类一样。

答案 3 :(得分:3)

如果您为多个css文件中的选择器定义了样式,则将使用上次加载的CSS文件中的样式

答案 4 :(得分:2)

是的,这就是样式表的工作方式。最后一个获胜。

确保默认样式表的特异性不大于您的覆盖。是的,如果可以,请避免!重要。这太傻了。

答案 5 :(得分:2)

是的 - 线索在名为'cascading'的样式表上。因此,内联样式将覆盖头部中定义的样式,并且头部中的样式将覆盖样式表中的样式。最后一个样式表加载可能会覆盖前一个加载的样式。如果你在chrome中使用类似firebug或者检查器的东西,它会显示每种风格的来源或覆盖的内容。

答案 6 :(得分:2)

简单的答案是肯定的。在页面下面重新声明的任何样式都将覆盖页面加载中先前声明的类。

为此,第二个类声明必须在继承中。

继承样式时,类似.content {}和.body .content {}的行为可能会有所不同。