首页 > web前端 > css教程 > 正文

深入理解CSS选择器的优先级顺序

yulia
发布: 2018-09-18 15:03:31
原创
2483 人浏览过

CSS中有很多选择器,比如类选择器,标签选择器,ID选择器等等,不同选择器之间的优先级顺序也不一样,今天就和大家聊聊CSS选择器的优先级顺序,以及、!important的使用,有需要的朋友可以参考一下,希望对你有用。

1、!important 表示最高优先级。ie6浏览器不认识 !important 。

举例:

正常情况下,写在下面的样式优先级高于上面的样式

demo1{
color:red;
color:green; /*绿色的优先级高于红色,所有浏览器都会显示绿色*/
}
登录后复制

加了!important 那么它的优先级会比较高,ie6比较傻,不认识。

demo2 {
color:red !important; /*除了ie6,其他浏览器会认为红色优先级高,显示红色字体*/
color:green; /*ie6浏览器则顺序读取css所以显示绿色*/
}
登录后复制

但是注意,ie6不认识!important的优先级,但并不代表ie6不认识带!important的样式属性。

demo3{
color:red;
color:green !important; /*包括ie6,所有浏览器都显示绿色字体,ie6只是不认识优先级罢了*/
}
登录后复制

2、CSS (Cascading Style Sheets) 级联样式表,在实际应用中,一般有以下三种级联方式。

优先级:内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)。

1. 外联式(应用于多个网页)

外联式样式表中,CSS 代码作为文件单独存放,如以 style.css 文件包含所有样式。在 HTML 中的外部级联采用 标记或者 @import 语句来引入。

示例代码如下:

<link rel="stylesheet" href="style.css" type="text/css" /> //link 链接
@import url("style.css"); //@import 导入
登录后复制

和 @import 的异同见其文章

2. 内联式(应用于当前页面)

门户网站的 CSS 代码通常采用嵌入式,即通常所说的内联方式 (Inline Style),其使用