在HTML文件中引入CSS样式有三种方法&＃xff1a;
- 外部样式&＃xff1a;通过link标签引入CSS样式&＃xff1b;
- 内页样式&＃xff1a;写在HTML页面里面的style标签里面&＃xff1b;
- 行内样式&＃xff1a;写在对应标签的style属性里面。
我知道一般情况下使用外部样式&＃xff0c;减少代码冗余&＃xff0c;同时便于后期维护。但如果同时用三种方式引入相同的CSS样式&＃xff0c;谁的优先级更高呢&＃xff1f;
就做了个小测试&＃xff1a;
DOCTYPE html>
<html lang&＃61;"zh-CN">
<head>
<meta charset&＃61;"UTF-8"/>
<title>css样式优先级title>
<link href&＃61;"index.css" rel&＃61;"stylesheet" type&＃61;"text/css"/>
<style type&＃61;"text/css">
.box{background:red;border:1px solid black;width:100px;height:100px;
}
style>
head>
<body><div style&＃61;"background:yellow;width:100px;height:100px;" class&＃61;"box">div>
body>
html>
外部CSS样式代码&＃xff1a;
.box{width:100px;height:100px;background:blue;
}
- 外部样式&＃xff1a;blue
- 内页样式&＃xff1a;red
- 行内样式&＃xff1a;yellow
最后显示的效果是&＃xff1a;
把行内CSS的背景样式去掉后&＃xff0c;显示&＃xff1a;
可见&＃xff0c;CSS三种位置写法的优先级是&＃xff1a;行内样式&＃xff1e;内页样式&＃xff1e;外部样式
从CSS代码存放位置看权重优先级&＃xff1a;内嵌样式 > 内部样式表 > 外联样式表。其实这个基本可以忽视之&＃xff0c;大部分情况下CSS代码都是使用外联样式表。
从样式选择器看权重优先级&＃xff1a;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&＃xff1f;
一. 一个疑问&＃xff1f;看到过一篇关于 CSS 的文章&＃xff0c;其中说到&＃xff1a;对于类似 li#first 这样的选择器&＃xff0c;由于使用 id 就已经可以确定元素了&＃xff0c;没有必要再写上前面的 li, 直接写上 #first 这样的 id 选择器就可以了。听起来说得不错&＃xff0c;简单测试一下也没有问题。
可是&＃xff0c;我们经常看到带有元素名称的选择器&＃xff0c;例如&＃xff0c;在微软的项目模板中就有大量的带有元素名称的选择器&＃xff0c;如果没有用的话&＃xff0c;为什么要这样写呢&＃xff1f;
ul#navlist
{float: right;
}ul#navlist li
{display: inline;
}
写一个简单的菜单&＃xff0c;使用 ul 和 li 实现&＃xff0c;菜单项之间使用边框来实现间隔线。
html 代码如下&＃xff1a;
使用下面的样式表&＃xff0c;首先通过为所有的超级链接增加一个左边框来画出间隔的虚线&＃xff0c;然后将第一个菜单项的左边框去掉&＃xff0c;我的第一个样式使用了 .first a。
ul#navlist li{ display: inline;} ul#navlist li a{ border-left: 1px dotted #8A8575; padding: 10px; margin-top: 10px; color: #8A8575; text-decoration: none; float: left;} .first a{ border: none;} |
看一下效果&＃xff0c;完全没有反应。
还有的地方说 id 选择器的级别比较高&＃xff0c;那么将类改成 id 。
|
将样式表也进行相应的修改。
#first a{ border: none;} |
可是结果呢&＃xff1f;岿然不动&＃xff01;
用火狐的 firebug 看一看&＃xff0c;被忽略了。
为什么我的样式被秒杀了&＃xff1f;
网上有大量的文章&＃xff0c;但是说法并不一致&＃xff0c;有的说要考虑三个级别&＃xff0c;可是也有的说需要考虑四个级别&＃xff0c;但是总的方向大致是关于层叠的。
不如到 W3C 的网站上看一个究竟。相关的标准在 这个页面 可以看到&＃xff0c;目前为止的 CSS 标准有三个: CSS1, CSS2, 以及 CSS3。
CSS1 是最早的标准&＃xff0c;其中关于层叠顺序的描述在 这里&＃xff0c;还提供了一个简单的示例进行说明。
LI {...} /* a&＃61;0 b&＃61;0 c&＃61;1 -> specificity &＃61; 1 */UL LI {...} /* a&＃61;0 b&＃61;0 c&＃61;2 -> specificity &＃61; 2 */UL OL LI {...} /* a&＃61;0 b&＃61;0 c&＃61;3 -> specificity &＃61; 3 */LI.red {...} /* a&＃61;0 b&＃61;1 c&＃61;1 -> specificity &＃61; 11 */UL OL LI.red {...} /* a&＃61;0 b&＃61;1 c&＃61;3 -> specificity &＃61; 13 */#x34y {...} /* a&＃61;1 b&＃61;0 c&＃61;0 -> specificity &＃61; 100 */ |
在 CSS1 中将优先级分为三组&＃xff0c;将 id 选择器作为 a 组&＃xff0c;类选择器作为 b 组&＃xff0c;元素名作为 c 组&＃xff0c;每组中出现一次&＃xff0c;计数一次&＃xff0c;按照先 a 组进行比较&＃xff0c;相同的情况下&＃xff0c;使用 b 组进行比较&＃xff0c;最后是 c 组。什么选择器的优先级别高&＃xff0c;什么选择器提供的样式有效。比如在上面的例子中&＃xff0c;第 5 组使用 id 的级别最高&＃xff0c;所以&＃xff0c;这组的样式设置生效&＃xff0c;而其他的设置将会被忽略掉。
CSS21 标准
在 CSS2 中&＃xff0c;又增加了关于行内说明 style 的组&＃xff0c;所以参与比较的组成为了 4 组&＃xff0c;其中 style 的优先级别最高。同样&＃xff0c;在 CSS2 的标准说明中也提供了样例。
* {} /* a&＃61;0 b&＃61;0 c&＃61;0 d&＃61;0 -> specificity &＃61; 0,0,0,0 */ li {} /* a&＃61;0 b&＃61;0 c&＃61;0 d&＃61;1 -> specificity &＃61; 0,0,0,1 */ li:first-line {} /* a&＃61;0 b&＃61;0 c&＃61;0 d&＃61;2 -> specificity &＃61; 0,0,0,2 */ ul li {} /* a&＃61;0 b&＃61;0 c&＃61;0 d&＃61;2 -> specificity &＃61; 0,0,0,2 */ ul ol&＃43;li {} /* a&＃61;0 b&＃61;0 c&＃61;0 d&＃61;3 -> specificity &＃61; 0,0,0,3 */ h1 &＃43; *[rel&＃61;up]{} /* a&＃61;0 b&＃61;0 c&＃61;1 d&＃61;1 -> specificity &＃61; 0,0,1,1 */ ul ol li.red {} /* a&＃61;0 b&＃61;0 c&＃61;1 d&＃61;3 -> specificity &＃61; 0,0,1,3 */ li.red.level {} /* a&＃61;0 b&＃61;0 c&＃61;2 d&＃61;1 -> specificity &＃61; 0,0,2,1 */ #x34y {} /* a&＃61;0 b&＃61;1 c&＃61;0 d&＃61;0 -> specificity &＃61; 0,1,0,0 */ style&＃61;"" /* a&＃61;1 b&＃61;0 c&＃61;0 d&＃61;0 -> specificity &＃61; 1,0,0,0 */ |
"x97z" style&＃61;"color: green">
在这个示例中&＃xff0c;style 的优先级别最高&＃xff0c;所以将会覆盖掉通过 id 进行的设置&＃xff0c;颜色为绿色。
四. 解决问题通过上面的分析可以看到&＃xff0c;仅仅提供选择器并不足以能够生效&＃xff0c;还要看选择器的优先级别&＃xff0c;在我们的问题中&＃xff0c;即使使用 id 来选择第一个菜单项&＃xff1a;#first a &＃xff0c;包括了一个 id 和一个元素名&＃xff0c;那么所得的优先级别为&＃xff1a;
a&＃61;0, b&＃61;1, c&＃61;0, d&＃61;1
可是&＃xff0c;通用的选择器是这样的&＃xff1a;ul#navlist li a&＃xff0c;优先级中却包括了一个 id, 还有 3 个元素名称&＃xff0c;所以优先级别为&＃xff1a;
a&＃61;0, b&＃61;1, c&＃61;0, d&＃61;3
所以我们的选择器没有比过通用的选择器&＃xff0c;悲剧发生了&＃xff01;
知道了原因&＃xff0c;问题也就简单了&＃xff0c;提高我们选择器的优先级别&＃xff0c;超过通用选择器的优先级就可以了&＃xff0c;比如&＃xff0c;我们可以写成这样&＃xff1a;
ul#navlist li#first a |
现在的优先级是多少呢&＃xff1f;
a&＃61;0, b&＃61;2, c&＃61;0, d&＃61;3
在 b 组比较的时候就已经超过了&＃xff0c;看看是否已经成功了&＃xff01;
还可以加上重要性说明&＃xff0c;也可以解决。!important 必须写在样式与分号之间&＃xff0c;每个样式必须单独声明。
#first a{ border: none !important;} |
看来选择器不是那么简单呀&＃xff01;
------------------------
感谢司徒正美的奉献&＃xff0c;转载地址&＃xff1a;http://www.cnblogs.com/rubylouvre/archive/2012/09/26/2524700.html
京公网安备 11010802041100号