css声明的优先级

选择器的特殊性
  选择器的特殊性由选择器本身的组件确定,特殊性值表述为4个部分,如0,0,0,0,0
  一个选择器的具体特殊性如下确定
  1、对于选择器给定的ID属性值,加0,1,0,0
  2、对于选择器中给定的各个类属性,属性选择,或伪类,加0,0,1,0
  3、对于选择器中给定的各个元素和伪元素,加0,0,0,1
  4、通配符的选择器的特殊性为0,0,0,0
  5、结合符对选择器特殊性没有一点贡献
  6、内联声明的特殊性都是1,0,0,0
  7、继承没有特殊性
  特殊性1,0,0,0大于所有的以0开头的特殊性(不进位)
  选择器的特殊性最终都会授予给其对应的声明
  如果多个规则与同一个元素匹配,而且有些声明互相冲突时,特殊性越大的越占优势

  注意:id选择器和属性选择器
  div[id="test"](0,0,1,1) and #test(0,1,0,0)
  重要声明
  有时某个声明比较重要,超过了所有的其他声明,css2-1就称之为重要声明
  并允许在这些声明的结束分号之前插入!important来标志
  必须要准确的放置!important 否则声明无效
  !important总是要放在声明的最后,即分号的前面

  标志位!important的声明并没有特殊性值,不过要与非重要声明分开考虑
  实际上所有的重要声明会被浏览器分为一组,重要声明的冲突会在其内部解决(然后再去判断选择器的优先级)
  非重要声明也会被分为一组,非重要声明的冲突也会在其内部解决
  如果一个重要声明与非重要声明冲突,胜出的总是重要声明

  继承
  继承没有特殊性,甚至0特殊性都没有
  0特殊性要比无特殊性来的强
  来源
  css样式的来源大致有三种
  创作人员
  读者
  用户代理

  权重:
  读者的重要声明(用户,就是直接在浏览器写的样式)
  创作人员的重要声明
  创作人员的正常声明
  读者的正常声明
  用户代理的声明(浏览器)

  层叠
  1.找出所有的相关规则,这些规则都包含一个选择器
  2.计算声明的优先级
  先按来源排序
  再按选择器的特殊性排序
  最终按排序

原文地址:https://www.cnblogs.com/caicaihong/p/9144377.html

时间: 2024-11-06 13:50:39

css声明的优先级的相关文章

[程序员入行必备]CSS样式之优先级

专业玩家请移步:http://www.w3.org/TR/CSS2/cascade.html 使用CSS控制页面样式时,经常出现设定的样式被"覆盖",不能生效的情况. 浏览器是依据怎样的优先次序判断CSS样式的优先级的呢? 总结如下: 样式的来源 样式有多处来源,有网页开发作者设定的.有浏览器默认的.还有网页用户设定的.各种样式声明逐层叠加,或继承.或覆盖.或叠加计算,影响元素的展现效果. 样式的来源依次有: 1.浏览器默认样式: 2.用户样式: 3.作者链接样式: 4.作者页内嵌入样

详解CSS选择器、优先级与匹配原理

最常用的五类CSS选择器 准确而简洁的运用CSS选择器会达到非常好的效果.我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果.在实际工作中,最常用的选择器有以下五类: 一.标签选择器: 顾名思议,标签选择器是直接将HTML标签作为CSS选择器,可以是p.h1.dl.strong等HTML标签.如: p{font:12px;} em{color:blue;} dl{float:left;margin-top:10px;} 二.id选择器: 我们通常

Unit02: CSS 概述 、 CSS 语法 、 CSS 选择器 、 CSS声明

Unit02: CSS 概述 . CSS 语法 . CSS 选择器 . CSS声明 my.css p { color: yellow; } demo1.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <!-- 2.内部样式:在head元素内部的style标签内 写样式,这种样式

CSS样式选择器优先级

原文:CSS样式选择器优先级 CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class类选择器的数量.4.d为类型选择器的数量5.属性选择器,伪类选择器和class类选择器优先级一样,伪元素选择器和类型选择器一样6.!important 权重最高,比 inline style 还要高. 例如: 选择器 特殊性 (a,b,c,d) Style= ”” 1,

CSS样式的优先级

1.相同权值情况下,CSS样式的优先级总结来说,就是--就近原则(离被设置元素越近优先级别越高): 内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中). 2.权值不同时,浏览器是根据权值来判断使用哪种css样式的,哪种样式权值高就使用哪种样式. 下面是权值的规则: 标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100.例如下面的代码: p{color:red;} /*标签,权值为1*/ p span{color:green;} /*两个标签,权值为1+

详解CSS选择器、优先级与匹配原理【转】

作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通过Firebug查看,发现没有起作用的属性被覆盖了.这个时候突然意识到了CSS选择器的优先级问题,这里就CSS选择器的优先级问题做了一些总结. 51CTO推荐阅读:巧妙地使用CSS选择器 选择器种类 严格来讲,选择器的种类可以分为三种:标签名选择器.类选择器和ID选择器.而所谓的后代选择器和群组选择

CSS选择符优先级引起的样式失效

选择符优先级带来的样式失效: 由于CSS选择符优先级可能引起某些样式失效,这个问题初学者可能会碰上,但是往往并不容易发现. 代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂蚁部落

C语言的声明的优先级规则

C语言的声明的优先级规则如下: A 声明从它的名字开始读取,然后按照优先级顺序依次读取 B 优先级从高到低依次是:   B.1 声明中被括号括起来的那一部分   B.2 后缀操作符[圆括号 ()表示这是一个函数,方括号 [] 表示这是一个数组]   B.3 前缀操作符[* 表示这是一个指向 ......的指针] C 如果  const 或  volatile如 关键字的后面紧跟说明符 [如  int. long等],那么它作用于类型说明符. 在其他情况下, const和[或] volatile关

理解C语言声明的优先级规则

A 声明从它的名字开始读取,然后按照优先级顺序依次读取. B 优先级从高到低依次是:    B.1 声明中被括号括起来的那部分    B.2 后缀操作符:         括号()表示这是一个函数,而         方括号[]表示这是一个数组.    B.3 前缀操作符:星号*表示 "指向-的指针". C 如果const和(或)volatile关键字的后面紧跟类型说明符(如int,long等),那么它作用于类型说明符.在其他情况下,const和(或)volatile关键字作用于它左边