您的位置：首页 > Web前端 > CSS

css学习之路(3)--css如何选择样式（优先级）

2014-12-22 16:03 393 查看

这一篇中，当有对同一个元素应用多个样式规则时，如何进行样式选择，以及css(层叠样式表)中层叠的含义

三个基本概念：特殊性，继承，层叠

一、特殊性

<body>
<div>test1</div>
</body>
样式表如下：
body div{color:red;}
div{color:blue;}

上面的‘test1’会是什么颜色？-----红色

为什么是红色而不是蓝色？------因为特殊性，对于每一个规则，浏览器都会计算选择器的特殊性，若一个元素有多个冲突属性申明时候，最高特殊属性的申明（规则）被使用。

1.选择器的特殊性计算规则

对于选择器中给定的各个ID属性值，加0,1,0,0
对于选择器中给定的类属性，属性选择或伪类，加0,0,1,0
对于选择器中给定的各个元素和伪元素，加0,0,0,1;
结合符，通配符加0,0,0,0
内联样式特殊性（css2.1）为：1,0,0,0

上例中，body div{color:red;}//0,0,0,2;(有效)

div{color:blue;}//0,0,0,1;

对上面计算规则的几组例子

h2.grape{color:purple;}//0,0,1,1(有效)
body h2{color:silver;}//0,0,0,2
————————————————————
html>body table tr[id="totals"] li{color:maroon;}//0,0,1,5
li#answer{color:navy;}//0,1,0,1（有效）

左边的值比右边的值要大，如1,0,0,0特殊性大于0,1,0,0；0,1,0,0大于0,0,32,43；

2.重要性

在元素属性后面添加'!important'，用于改变元素的特殊性（如：p.dark{color:#333 !important;background:white;}）
如果多个声明都重要，在每一个声明后面都添加‘!important’(如：p.dark{color:#333 !important;background:white !important;})
如果一个重要声明与非重要声明冲突，重要声明有效

对于：
<h1 class="title">test</h1>
有：
h1{color:gray !important}//有效
.title{color:red;}//无效

二、继承

即基于继承机制，样式不仅应用到指定元素，还会应用到它的后代元素。

<h1>test1 <em>test2</em></h1>

h1{color:gray;}

//em元素也是灰色的

不是所有的属性都能继承，如border，一般的，大多数盒子模型属性（外边框，内边框，背景，边框）都不能被继承。
继承的属性值没有特殊性，甚至连0特殊性都没有，通配符是有0特殊性的

对于
<h1>test1 <em>test2</em></h1>
有
*{color:red;}
h1{color:blue;}

//em元素为红色，而不是蓝色，通配符有0特殊性，继承连0特殊性都没有

三、层叠

如果两个特殊性相等的两个规则同时运用同一个元素，如何解决这个冲突？

<h1>test1</h1>

h1{color:blue;}
h1{color:red;}

//谁有效？

css所基于的方法是让样式层叠在一起，这是通过结合特殊性和继承做到的。

层叠规则如下：

找出所有相关的规则，这些规则都包含与一个给定元素匹配的选择器
按显式权重对应用到该元素的所有声明排序；标志!important的规则权重高于无它的规则。按来源对给定元素的所有声明排序（权重由大到小：读者重要声明，创作者重要声明，创作者正常声明，读者正常声明，用户代理声明）
按特殊性对应用到该元素的所有声明排序；特殊性越高，权重越大
按照出现在文档中的顺序对该元素所有声明排序。一个声明在样式表或文档中越后出现，权重越大

例子如下：

对第2条规则（按权重和来源排序）举例：
<h1 style="color:blue;">test</h1>
p{color:red !important;}
//h1为红色，而不是蓝色
————————————————
<h1>test</h1>
h1{color:blue;} //来自创作者样式表
h1{color:red;}//来自读者样式表
//h1为蓝色，而不是红色
————————————————
<h1>test</h1>
h1{color:blue !important;}//来自创作者样式表
h1{color:red !important;}//来自读者样式表
//h1为红色，而不是蓝色

对第3条规则（按特殊性排序）举例：
<h1 id="bright">test</h1>

h1#bright{color:blue;}//特殊性：0,1,0,1
body h1{color:red;} //特殊性：0,0,0,2
//h1为蓝色，而不是红色

对于第4条规则（按顺序）举例：
<h1>test</h1>
h1{color:blue;}
h1{color:red;}
//h1为红色，而不是蓝色

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航