CSS的优先级与特殊性
作者:dudo 来源:dudo blog 发布时间:2008-06-24 11:36:00
即使在不太复杂的样式表中,也可能会有两个或者更多个规则找到同一元素。CSS通过一个叫做层叠(cascade)的过程处理这种冲突。层叠给每个规则分配一个重要程度指数。作者定义的样式具有最高的重要性指数,其次是用户定义的样式。但是为了增强用户的控制能力,用户可以通过为任何规则增加一个!important来提高它的重要性指数,让它的优先级高于任何规则,甚至是比作者的!important还要高。
因此,层叠重要性指数的次序依次为:
标记为!important的用户样式
标记为!important的作者样式
作者样式
用户样式
浏览器/用户代理的默认样式
为了计算规则的优先级,每种类型的选择符都有一个相应的数值,由于每个选择器都由若干选择符组成,所以选择器的优先指数由选择符对应的数值相加而成,数值越高,优先级越高。CSS中的选择符有四类:
行内样式(Inline Style),如<span style="color:red">...</span>
ID选择符(ID selectors),如#myid
类、属性选择符、伪类(Classes, attributes and pseudo-classes),如 .class {...}、[href$=dudo.org]、:hover
元素(elements)、伪元素选择符(pseudo-elements),如 p {...}、:first-line {...}
怎么来测量呢?如前所述,它们每一类都有不同的数值表示,其中:
行内样式为:1000
ID选择符为:0100
类选择符为:0010
元素样式为:0001
这里要指出的是,所有这些数值都不是10进制数字,1000只是代码它是一个行内样式,
例如,body #wrap p {...},那么它的优先级指数就是 1+100+1=102,而body div#wrap p {...}的优先级指数就是 1+ 1 +100 + 1 =103。
再看一下其它的例子:
* { } 0
li:first-line { } 2 (one element, one pseudo-element)
ul ol+li { } 3 (three elements)
ul ol li.red { } 13 (one class, three elements)
style=”” 1000 (one inline styling)
div p { } 2 (two HTML selectors)
div p.sith { } 12 (two HTML selectors and a class selector)
body #darkside .sith p { } 112 (HTML selector, id selector, class selector, HTML selector; 1+100+10+1)
看这段代码:
#wrap #content {color: blue;}
#content {color: red;}
<div id="wrap">
<div id="content">this is a text here</div>
</div>
最终文本会显示什么样的颜色呢?
是的,样式覆盖只会发生在具有相同优先级的情况下。这个例子中#wrap #content为200,而#content为100,纵使后设定color:red,也不会覆盖掉先前设定的color:blue;。此外,你可以为#content {color: red;}增加!important来看看效果。
以上都是在少于10个选择符的情况下,可以把这些数值当作十进制来使用和比较,但是,当选择符超过10个(虽然可能性很小)又会怎么样呢?我们参考一个Eric的例子:
.hello {color: red;} /* specificity = 10 */
HTML BODY DIV UL LI OL LI UL LI OL LI UL LI OL LI {color: green;}
/* specificity = 15 */
这里的10并不是“十”,它仅仅代表是一个烦选择符,所以的它的优先级依然要比 15个类型选择符组成的选择器要高。如果换成十六进制的话,就是这个样子
.hello {color: red;} /* specificity = 10 */
HTML BODY DIV UL LI OL LI UL LI OL LI UL LI OL LI {color: green;}
/* specificity = 15 */
但是问题,如果你再添加两个元素,就又变成了11了,还是出现前面的情况。不过你应该始终记得,即使数值“看起来”比较大,它们的排序首先按照类型优先级来决定。
猜你喜欢
- 本文实例为大家分享了微信小程序实现录音的具体代码,供大家参考,具体内容如下为录音录音中wxml:<!-- 开始录音 --><
- 单分支结构:if 语句Python 中 if 语句的语法格式如下:if <条件>:    
- 漏斗图漏斗图是由Light等在1984年提出,一般以单个研究的效应量为横坐标,样本含量为纵坐标做的散点图。效应量可以为RR、OR和死亡比或者
- 问题起因最近要将一个文本分割成好几个topic,每个topic设计一个regressor,各regressor是相互独立的,最后汇总所有to
- SOA 服务用消息进行通信,该消息通常使用XML Schema来定义(也叫做XSD, XML Schema Definition)。消费者和
- function rss_locale_date ($fmt, $ts, $addTZOffset&
- 临时表产生:A: SELECT INTO和B:CREATE TABLE + INSERT INTO1. A 要比B 快很多。但是A会锁定te
- mysql中用命令行复制表结构的方法主要有一下几种: 1.只复制表结构到新表CREATE TABLE 新表 SELECT * FR
- 本篇文章主要介绍Java操作MongoDB。开发环境:System:WindowsIDE:eclipse、MyEclipse 8Databa
- 1.python中列表list的拷贝,会有什么需要注意的呢? python变量名相当于标签名。list2=list1 ,直接赋值,实质上指向
- 本文实例讲述了php实现汉字验证码和算式验证码的方法。分享给大家供大家参考。具体分析如下:大家知道简单数字或者字母验证码很容易被破解,但是算
- 我们在做接口测试时,除了常见的http接口,还有一种比较多见,就是socket接口,今天讲解下怎么用Python进行websocket接口测
- 业务的开发时候有一个需求,需要对比当前时间段和去年同星期的时间段的数据,例如当前时间是2019-04-11,是今年的第十五周的周四,如何去取
- 我们都知道并发(不是并行)编程目前有四种方式,多进程,多线程,异步,和协程。多进程编程在python中有类似C的os.fork,当然还有更高
- 一,实用方法1.线程之间执行是无序的,cpu调度哪个线程就执行哪个线程;2.主线程等待所有子线程结束后再结束,设置守护线程可以实现当主线程结
- 一、关于exists查询explain select * from vendor where EXISTS(select * from ar
- Go对字符串格式化提供了良好的支持。下面我们看些常用的字符串格式化的例子。package mainimport "fmt"
- 因为前端课要交一个大作业,刚好工作室的项目需要一个后台管理界面,就自学了一下vue,今天做了一个选项卡切换,最开始的作为菜鸡是用的js做的,
- 为了防止采集,我试过各种方法,绝大多数方法是“ * 剑”---防止了采集,也影响了搜索引擎收录,实在不爽!一天本人忽发奇想:何不
- Python练习内容:SMTP是发送邮件的协议,Python内置对SMTP的支持,可以发送纯文本邮件、HTML邮件以及带附件的邮件。Pyth