欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

!important、CSS样式、选择器优先级高低的深入理解

程序员文章站 2022-03-14 11:53:07
1、!important 表示最高优先级。ie6不认识 !important 。 举例: 正常情况下,写在下面的样式优先级高于上面的样式 demo1{ color:red;...

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 中的外部级联采用 <link> 标记或者 @import 语句来引入。

示例代码如下:

<link rel="stylesheet" href="style.css" type="text/css" /> //link 链接

@import url("style.css"); //@import 导入

<link> 和 @import 的异同见其它博文

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

门户网站的 css 代码通常采用嵌入式,即通常所说的内联方式 (inline style),其使用 <style> 标记将样式定义为内部块对象。

示例代码如下:

<style type="text/css">

    body{font-family:arial,helvetica,sans-serif;}

</style>

内联 css 可以有效减少 http 请求,提升页面性能,缓解服务器压力。由于浏览器加载完 css 才能渲染页面,因此能防止 css 文件无法读取而造成页面裸奔的现象。

3. 嵌入式(应用于具体的标签)

最初级的 css 写法即把代码直接添加于所修饰的标记元素。

示例代码如下:

<p style="font-family:arial,helvetica,sans-serif;">饿了么</p>

这样做虽然更为直观,但很大程度上加大了页面体积,不符合结构与表现分离的设计思想。

3、权值不同时,浏览器是根据权值来判断使用哪种选择器的css样式,样式权值高的就使用哪种样式。

权值规则:标签(p、span)的权值为1,类选择器的权值为10,id选择器的权值最高为100。

举例:

p {color: red;} /*标签,权值为1*/

p span {color: green;} /*两个标签,权值为1+1=2*/

p>span {color: purple;} /*权值与上面的相同,因此采取就近原则*/

.main {color: white;} /*类选择符,权值为10*/

p span.warning {color: purple;} /*权值为1+1+10=12*/

#main .con p {color: yellow;}  /*权值为100+10+1=111*/