详解
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(Cascading Style Sheets)是一种用于描述网页文档布局的语言,主要用于控制HTML或XML等文档中的元素显示样式。初学者往往会觉得CSS非常简单直观,但实际上,随着对CSS掌握...
内联样式的优先级与id选择器相同。 3. id 选择器 id选择器是指用于选择特定id的元素的选择器。例如:#header{ display:none;} <div id="header"></div>。id选择器的优先级高于类选择器和元素选择器。 4. 类(属性...
### CSS优先级与!important属性详解 #### CSS优先级的基本规则 在CSS中,样式表的优先级决定了元素最终采用哪一套样式。理解CSS优先级的基本规则对于开发人员来说至关重要,尤其是在处理复杂的页面布局时。 1. **...
在讨论CSS优先级问题之前,我们首先要明白,什么是CSS优先级?它是当多个CSS规则作用于同一个HTML元素时,浏览器如何决定哪一个规则会被应用的机制。CSS优先级是CSS样式的权重排序,它决定了当出现样式冲突时,哪一...
了解并正确使用CSS优先级对于创建可维护、可扩展的样式表至关重要。它可以帮助避免不必要的冲突,确保元素按照预期呈现。合理规划选择器可以帮助减少对`!important`的依赖,从而保持CSS的整洁和灵活性。 6. **最佳...
最权威的CSS样式优先级,本人整理过的,做过笔记。
**CSS详解教程(基础)** CSS,全称为Cascading Style Sheets,中文译为层叠样式表,是一种用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的样式表语言。它的主要作用是将内容与表现分离,使得网页...
#### 二、CSS优先级规则详解 ##### 1. 特异性(Specificity) 特异性是指CSS选择器的优先级。一个更具体的样式规则通常会被认为比一个更通用的规则具有更高的优先级。具体来说: - 内联样式(例如`...
CSS选择器优先级详解 CSS选择器优先级是CSS样式表中一个非常重要的概念,它决定了CSS样式的应用顺序和优先级。本文将详细介绍CSS选择器优先级的四大原则,以及它们之间的关系和应用。 原则一:继承不如指定 如果...
【CSS的结构与层叠以及格式化】 在CSS(Cascading Style Sheets)中,结构、层叠和格式化是理解CSS布局的关键概念。首先,我们来看一下它们各自的概念: **结构** 每个HTML或XML文档都有一个结构树,它描述了文档...
在CSS中,选择器优先级顺序是决定多个样式冲突时哪个样式生效的关键因素。它涉及到特殊性(Specificity)和重要性(!important)这两个概念。理解并熟练掌握这些规则对于编写高效且易于维护的CSS代码至关重要。 ...
3. **层叠与继承**:CSS的“级联”特性意味着当多个样式规则应用于同一元素时,将按照优先级决定最终效果。继承则允许子元素从父元素继承某些样式。 4. **盒模型**:CSS的盒模型是理解元素尺寸和布局的基础,包括...
首先,我们需要了解CSS选择器的优先级计算规则,它由四个级别组成: 1. ID选择器(如`#id`):每个ID选择器的权值为100。 2. 类选择器、属性选择器或伪类(如`.class`,`[attr]`,`:hover`):每个此类选择器的权值...
3. **优先级**: CSS的优先级由选择器的特殊性决定,内联样式 > 内部样式表 > 外部样式表,同级别的样式通过层叠原则决定最终效果。 ### 二、选择器 1. **基本选择器**: 类似于`*`(所有元素)、`#id`(ID选择器)、`.`...
**CSS详解及查询** 在网页设计领域,CSS(Cascading Style Sheets)是不可或缺的一部分,它负责定义HTML或XML(包括SVG、XHTML等)文档的呈现方式。本资源主要针对CSS的学习和查询,旨在帮助用户全面理解CSS,并...