CSS三种写法的优先级
2015-12-06 18:15
441 查看
在HTML文件中引入CSS样式有三种方法:
外部样式:通过link标签引入CSS样式;
内页样式:写在HTML页面里面的style标签里面;
行内样式:写在对应标签的style属性里面。
我知道一般情况下使用外部样式,减少代码冗余,同时便于后期维护。但如果同时用三种方式引入相同的CSS样式,谁的优先级更高呢?
就做了个小测试:
外部CSS样式代码:
外部样式:blue
内页样式:red
行内样式:yellow
最后显示的效果是:
把行内CSS的背景样式去掉后,显示:
可见,CSS三种位置写法的优先级是:行内样式>内页样式>外部样式
感谢@我是攻城狮的提醒,去认真看了CSS权重这个知识,明白了自己是走了歧途。
从CSS代码存放位置看权重优先级:内嵌样式 > 内部样式表 > 外联样式表。其实这个基本可以忽视之,大部分情况下CSS代码都是使用外联样式表。
从样式选择器看权重优先级:important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符。
important的权重为1,0,0,0
ID的权重为0,1,0,0
类的权重为0,0,1,0
标签的权重为0,0,0,1
伪类的权重为0,0,1,0
属性的权重为0,0,1,0
伪对象的权重为0,0,0,1
通配符的权重为0,0,0,0
再分享一高质量篇博文。
可是,我们经常看到带有元素名称的选择器,例如,在微软的项目模板中就有大量的带有元素名称的选择器,如果没有用的话,为什么要这样写呢?
html 代码如下:
使用下面的样式表,首先通过为所有的超级链接增加一个左边框来画出间隔的虚线,然后将第一个菜单项的左边框去掉,我的第一个样式使用了 .first a。
看一下效果,完全没有反应。
还有的地方说 id 选择器的级别比较高,那么将类改成 id 。
将样式表也进行相应的修改。
可是结果呢?岿然不动!
用火狐的 firebug 看一看,被忽略了。
网上有大量的文章,但是说法并不一致,有的说要考虑三个级别,可是也有的说需要考虑四个级别,但是总的方向大致是关于层叠的。
不如到 W3C 的网站上看一个究竟。相关的标准在 这个页面 可以看到,目前为止的 CSS 标准有三个: CSS1, CSS2, 以及 CSS3。
CSS1 是最早的标准,其中关于层叠顺序的描述在 这里,还提供了一个简单的示例进行说明。
在 CSS1 中将优先级分为三组,将 id 选择器作为 a 组,类选择器作为 b 组,元素名作为 c 组,每组中出现一次,计数一次,按照先 a 组进行比较,相同的情况下,使用 b 组进行比较,最后是 c 组。什么选择器的优先级别高,什么选择器提供的样式有效。比如在上面的例子中,第 5 组使用 id 的级别最高,所以,这组的样式设置生效,而其他的设置将会被忽略掉。
CSS21 标准
在 CSS2 中,又增加了关于行内说明 style 的组,所以参与比较的组成为了 4 组,其中 style 的优先级别最高。同样,在 CSS2 的标准说明中也提供了样例。
在这个示例中,style 的优先级别最高,所以将会覆盖掉通过 id 进行的设置,颜色为绿色。
a=0, b=1, c=0, d=1
可是,通用的选择器是这样的:ul#navlist li a,优先级中却包括了一个 id, 还有 3 个元素名称,所以优先级别为:
a=0, b=1, c=0, d=3
所以我们的选择器没有比过通用的选择器,悲剧发生了!
知道了原因,问题也就简单了,提高我们选择器的优先级别,超过通用选择器的优先级就可以了,比如,我们可以写成这样:
现在的优先级是多少呢?
a=0, b=2, c=0, d=3
在 b 组比较的时候就已经超过了,看看是否已经成功了!
还可以加上重要性说明,也可以解决。!important 必须写在样式与分号之间,每个样式必须单独声明。
看来选择器不是那么简单呀!
------------------------
感谢司徒正美的奉献,转载地址:http://www.cnblogs.com/rubylouvre/archive/2012/09/26/2524700.html
外部样式:通过link标签引入CSS样式;
内页样式:写在HTML页面里面的style标签里面;
行内样式:写在对应标签的style属性里面。
我知道一般情况下使用外部样式,减少代码冗余,同时便于后期维护。但如果同时用三种方式引入相同的CSS样式,谁的优先级更高呢?
就做了个小测试:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"/> <title>css样式优先级</title> <link href="index.css" rel="stylesheet" type="text/css"/> <style type="text/css"> .box{ background:red; border:1px solid black; width:100px; height:100px; } </style> </head> <body> <div style="background:yellow;width:100px;height:100px;" class="box"> </div> </body> </html>
外部CSS样式代码:
.box{ width:100px; height:100px; background:blue; }
外部样式:blue
内页样式:red
行内样式:yellow
最后显示的效果是:
把行内CSS的背景样式去掉后,显示:
可见,CSS三种位置写法的优先级是:行内样式>内页样式>外部样式
感谢@我是攻城狮的提醒,去认真看了CSS权重这个知识,明白了自己是走了歧途。
从CSS代码存放位置看权重优先级:内嵌样式 > 内部样式表 > 外联样式表。其实这个基本可以忽视之,大部分情况下CSS代码都是使用外联样式表。
从样式选择器看权重优先级:important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符。
important的权重为1,0,0,0
ID的权重为0,1,0,0
类的权重为0,0,1,0
标签的权重为0,0,0,1
伪类的权重为0,0,1,0
属性的权重为0,0,1,0
伪对象的权重为0,0,0,1
通配符的权重为0,0,0,0
再分享一高质量篇博文。
id 的选择器为什么要这么写 li#first?
一. 一个疑问?
看到过一篇关于 CSS 的文章,其中说到:对于类似 li#first 这样的选择器,由于使用 id 就已经可以确定元素了,没有必要再写上前面的 li, 直接写上 #first 这样的 id 选择器就可以了。听起来说得不错,简单测试一下也没有问题。可是,我们经常看到带有元素名称的选择器,例如,在微软的项目模板中就有大量的带有元素名称的选择器,如果没有用的话,为什么要这样写呢?
ul#navlist { float: right; } ul#navlist li { display: inline; }
二. 问题出现了!
写一个简单的菜单,使用 ul 和 li 实现,菜单项之间使用边框来实现间隔线。html 代码如下:
<ul id="navlist"> <li class="first"><a href="/" id="current">Home</a></li> <li><a href="#">Store</a></li> <li><a href="#">ShoppingCart</a></li> <li><a href="#">Admin</a></li> </ul>
使用下面的样式表,首先通过为所有的超级链接增加一个左边框来画出间隔的虚线,然后将第一个菜单项的左边框去掉,我的第一个样式使用了 .first a。
还有的地方说 id 选择器的级别比较高,那么将类改成 id 。
用火狐的 firebug 看一看,被忽略了。
三. 探源
为什么我的样式被秒杀了?网上有大量的文章,但是说法并不一致,有的说要考虑三个级别,可是也有的说需要考虑四个级别,但是总的方向大致是关于层叠的。
不如到 W3C 的网站上看一个究竟。相关的标准在 这个页面 可以看到,目前为止的 CSS 标准有三个: CSS1, CSS2, 以及 CSS3。
CSS1 是最早的标准,其中关于层叠顺序的描述在 这里,还提供了一个简单的示例进行说明。
CSS21 标准
在 CSS2 中,又增加了关于行内说明 style 的组,所以参与比较的组成为了 4 组,其中 style 的优先级别最高。同样,在 CSS2 的标准说明中也提供了样例。
四. 解决问题
通过上面的分析可以看到,仅仅提供选择器并不足以能够生效,还要看选择器的优先级别,在我们的问题中,即使使用 id 来选择第一个菜单项:#first a ,包括了一个 id 和一个元素名,那么所得的优先级别为:a=0, b=1, c=0, d=1
可是,通用的选择器是这样的:ul#navlist li a,优先级中却包括了一个 id, 还有 3 个元素名称,所以优先级别为:
a=0, b=1, c=0, d=3
所以我们的选择器没有比过通用的选择器,悲剧发生了!
知道了原因,问题也就简单了,提高我们选择器的优先级别,超过通用选择器的优先级就可以了,比如,我们可以写成这样:
a=0, b=2, c=0, d=3
在 b 组比较的时候就已经超过了,看看是否已经成功了!
还可以加上重要性说明,也可以解决。!important 必须写在样式与分号之间,每个样式必须单独声明。
------------------------
感谢司徒正美的奉献,转载地址:http://www.cnblogs.com/rubylouvre/archive/2012/09/26/2524700.html
相关文章推荐
- CSS学习笔记一
- 没事写写css
- 【Html】三种CSS样式的优先级
- 使用PHP实现下载CSS文件中的图片
- 【Html】外部式css样式,写在单独的一个文件中
- 【Html】CSS注释代码
- [JavaWeb基础] 028.CSS简介和基础语法
- css hack 与案例
- 在html中嵌入css的三种方法
- css在网页中的一些重要运用
- css格式化的基本运用
- css 的base类
- html+css笔记
- CSS样式表中的z-index总结
- css3学习笔记(一)
- css3-transform
- CSS圆角效果 -webkit-border-radius(CSS3中border-radius隐藏的威力)
- 搞定HTML\CSS之background属性
- 《CSS3秘籍》第1、2章
- 使用PHP实现下载CSS文件中的图片