码迷,mamicode.com
首页 > Web开发 > 详细

css——层叠

时间:2018-04-15 21:51:58      阅读:222      评论:0      收藏:0      [点我收藏+]

标签:mon   order   idt   否则   最大的   有一个   个数   伪类   一个   

1.层叠是一种机制,用于解决css声明间的冲突。

css冲突:多个相同的成熟时声明,用于同一个元素就会产生冲突。

2.层叠的过程

【1】比较优先级

每个声明否具有一个优先级,当声明发生冲突时,会保留优先级高的,淘汰优先级低的。 
一个声明的优先级与他的来源和重要性有关。
来源一般分为三部分:浏览器默认样式,作者样式,用户样式 
从优先级高到低的排列顺序为:用户样式,作者样式,浏览器默认样式。
重要性:如果某属性值后跟上一个“!importent”,则表示一条重要声明,否则都是普通声明。
列:

p{color:red;}/*普通声明*/
p{color:red importent;}/*重要声明*/

【2】比较特殊性(specificity)

当声明发生冲突时,特殊性高的会保留,特殊性低的会淘汰。
声明的特殊性取决于规则实际用的范围大小,规则适用范围越小,特殊性越高,反之,特殊性越底。 
注:

*{声明块}/*通配符选择器,他的应用范围是整个页面*/
html{声明块}/*这两个选择器时范围最大的选择器*/

常见样式特殊性由高到低排行: 
1.行内样式 
2.id选择器 
3.类选择器 
4.元素选择器 
5.通配符选择器

【3】比较特殊性时,实质是比较声明的特指值(数值)

我们假设:
行内样式生成的值为(是行内样式生成1否则为0):a
id选择器个数生成的值为:b
类及伪类选择器个数生成的值为:c
元素及伪元素选择器个数生成的值为:d 
每一条声明的a与a,b与b,c与c,d与d的值进行对比,若得到一个最大的a值,与最大值对应的这条声明特殊性就越高,如果没有最大值则比较b的值,比较方法与a相同,以此类推……html元素将使用最大值对应的声明。

css——层叠

标签:mon   order   idt   否则   最大的   有一个   个数   伪类   一个   

原文地址:https://www.cnblogs.com/xhh776554/p/8849516.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!