详解
CSS优先级的读法,CSS优先级包含四个级别(文内选择符,ID选择符,Class选择符,元素选择符)以及各级别出现的次数。根据这四个级别出现的次数计算得到CSS的优先级。
对优先级的读法,应该是以“组”来分,这个组之间相互独立,从左到右进行对比。它们成组出现,以逗号分隔。
selector( a , b , c , d )
compare: ↑ , ↑ , ↑ , ↑
selector( a , b , c , d )
正如w3c.org中原文所示,分为a,b,c,d四组,全为正整娄,默认为0,对应于不同的选择器结构和组成形式。在选择器之间的优先级进行对比时,从左到右1对1对比,当比出有大者时即可停止比较。
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0 , 0 , 2 , 1 */
/*compare ↑ , ↑ , √ */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0 , 0 , 1 , 1 */
/*compare ↑ , ↑ , ↑ , √ */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0 , 0 , 1 , 3 */
/*compare ↑ , ↑ , √ */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0 , 1 , 0 , 0 */
/*compare ↑ , √ */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1 , 0 , 0 , 0 */
(上表中,↑表示还要进行比较,√表示从此处已得到了结果)
再有,只要正确书写,仅从优先级中大概知道选择器结构形式了,如:
1,0,0,0表示是元素内的style;
0,2,1,1表示是一个由两个ID选择器,1个类或伪类或属性选择器,以及一个元素选择器组成的选择器。
CSS优先级规则的细节:
在纠正读法后,才能开始讲详细的规则:
a组数值只有把CSS写进style属性时才会为1,否则为0.写进style的样式声明其实不算是个选择器,所以这里面的b,c,d组值均为0,只有真正的选择器才会有b,c,d组值。
b组数值决定于ID选择器#ID,有多少个ID选择器,并会进行此组数值累加;
c组数值决定于类、伪类和属性选择符,并会进行该组数值累加;
d组数值决定于元素名,即元素选择器,并会进行该组数值累加;
注意,这四组数值分别对应于不同类型的选择器,互不影响,根据读法法则进行比较。
这里没有讨论到!important,就近原则和继承,也没有实例代码,欢迎大家来webjx.com共同讨论!
下面是列子:CSS优先级问题
CSS优先级包含四个级别(文内选择符,ID选择符,Class选择符,元素选择符)以及各级别出现的次数。根据这四个级别出现的次数计算得到CSS的优先级。
CSS优先级的计算规则如下:
* 页面中定义的样式,加1,0,0,0
* 每个ID选择符(如 #id),加0,1,0,0
* 每个Class选择符(如 .class)、每个属性选择符(如 [attribute=])、每个伪类(如 :hover)加0,0,1,0
* 每个元素选择符(如p)或伪元素选择符(如 :firstchild)等,加0,0,0,1
然后,将这四个数字分别累加,就得到每个CSS定义的优先级的值,
然后从左到右逐位比较大小,数字大的CSS样式的优先级就高。
分享到:
相关推荐
详解CSS优先级的读法,CSS优先级包含四个级别(文内选择符,ID选择符,Class选择符,元素选择符)以及各级别出现的次数。根据这四个级别出现的次数计算得到CSS的优先级。 最近看到篇对CSS优先级有比较好的解释的...
那么应该如何处理 CSS 优先级问题呢,下面我总结了一些解决 CSS 优先级问题的常用法则。 样式距离 我们可以通过使用外部样式、内部样式、内联样式等方法给元素添加指定的样式,此时的优先级是: 外部样式 < 内部...
如果优先级相同,靠后的 CSS 会应用到元素上。 注意:元素在文档树中的位置是不会影响优先级的优先级顺序 优先级逐级增加的选择器列表: 通用选择器(*) 元素(类型)选择器 类选择器 属性选择器 伪类 ID ...
最权威的CSS样式优先级,本人整理过的,做过笔记。
CSS在使用选择器对元素施加属性的时候会有先后顺序,包括特殊性和重要性等概念在内,这里我们就来详解CSS中的选择器优先级顺序,需要的朋友可以参考下
一. 新手的疑问大家经常在网页中看到类似 li#first 这样的选择器。很多新手疑问了?由于使用 id 就已经可以确定元素了,为什么前面还要加一个 ...CSS Code复制内容到剪贴板 ul#navlist { float: rightright; }
作为一个Web开发者,掌握必要的前台技术也是很重要的特别是CSS选择器的优先级问题,为了广大web爱好者可以更好的解决问题,这里就CSS选择器的优先级问题做了一些总结
第 3 章 CSS 基础与书写规范 第29 页 3.1 CSS 的基础知识 3.1.1 什么是CSS 3.1.2 CSS 的语法 3.1.3 选择符 3.1.4 属性 3.1.5 伪类和伪元素 3.1.6 默认值 3.1.7 继承性 3.2 CSS 编码规范 3.2.1 CSS 基本书写规范 ...
CSS的引入方式共有三种:行内样式、内部样式表、外部样式表。 一、行内样式 使用style属性引入CSS样式。 示例: <h1 xss=removed>style属性的应用 直接在HTML标签中设置的样式 实际在写页面时不提倡使用,在测试的...
1.css的概述 1.问题 HTML属性修饰有一定局限,是不太便捷 2.css的语法规范 1.使用css样式方式 1.内联样式 行内样式 特点:将css样式定义在HTML标记中 语法: 样式声明:用样式属性和值组成(属性:值;) ...
66前端开发基础视频-CSS特殊性即CSS优先级(上).avi 67前端开发基础视频-CSS特殊性即CSS优先级(中).avi 68前端开发基础视频-CSS特殊性即CSS优先级(下).avi 69前端开发基础视频-CSS设置标签模式display属性...
摘要: 在我们制作页面时CSS hack由于不同的浏览器,比如Internet Explorer,Mozilla Firefox等,对CSS的解析...原理: 由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系。我们就可以根据这
css的存在形式及优先级 css边框以及其他常用样式 css之float样式 css之float实现作业实例 css之display样式 css之内外边距 本周作业以及思路 第15周 上节内容答疑 上节内容回顾 CSS内容补充之position CSS内容补充...
第14章 CSS与JavaScript 14.1 什么是CSS 14.2 什么是样式表 14.2.1 什么是兼容CSS的浏览器 14.2.2 样式表的工作原理 14.3 CSS程序结构 14.3.1 注释 14.3.2 组合 14.4 ...