`
sunguanxing
  • 浏览: 1097334 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

详解CSS优先级规则的级别与细节

阅读更多
  详解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样式的优先级就高。
分享到:
评论
1 楼 dutaojin 2010-05-16  
博主啊,我感觉你写的太专业了,实用性不强,我们在做开发的时候不大可能去这样比较,我认为不如比较外部样式、行内样式、ID、CLASS做比较,其实这个比较我还是能分得清楚的,关键就是我感觉不同的浏览器优先级不大一样,更要命的就是IE6中同等级别的样式它竟然哪个值大它就去哪个,比方说Width=100与101之间,同等级别下IE6竟然取101,还望这些方面楼主能分析下

相关推荐

    CSS优先级规则的细节

    详解CSS优先级的读法,CSS优先级包含四个级别(文内选择符,ID选择符,Class选择符,元素选择符)以及各级别出现的次数。根据这四个级别出现的次数计算得到CSS的优先级。  最近看到篇对CSS优先级有比较好的解释的...

    css优先级总结

    ### CSS优先级总结 #### 一、概述 CSS(Cascading Style Sheets)是一种用于描述网页文档布局的语言,主要用于控制HTML或XML等文档中的元素显示样式。初学者往往会觉得CSS非常简单直观,但实际上,随着对CSS掌握...

    css样式应用优先级实用PPT课件.pptx

    内联样式的优先级与id选择器相同。 3. id 选择器 id选择器是指用于选择特定id的元素的选择器。例如:#header{ display:none;} <div id="header"></div>。id选择器的优先级高于类选择器和元素选择器。 4. 类(属性...

    css优先级98908u0

    ### CSS优先级与!important属性详解 #### CSS优先级的基本规则 在CSS中,样式表的优先级决定了元素最终采用哪一套样式。理解CSS优先级的基本规则对于开发人员来说至关重要,尤其是在处理复杂的页面布局时。 1. **...

    CSS 优先级问题详解

    在讨论CSS优先级问题之前,我们首先要明白,什么是CSS优先级?它是当多个CSS规则作用于同一个HTML元素时,浏览器如何决定哪一个规则会被应用的机制。CSS优先级是CSS样式的权重排序,它决定了当出现样式冲突时,哪一...

    举例详解CSS中的的优先级

    了解并正确使用CSS优先级对于创建可维护、可扩展的样式表至关重要。它可以帮助避免不必要的冲突,确保元素按照预期呈现。合理规划选择器可以帮助减少对`!important`的依赖,从而保持CSS的整洁和灵活性。 6. **最佳...

    css样式的优先级详解(本人整理过的,做过笔记)

    最权威的CSS样式优先级,本人整理过的,做过笔记。

    CSS详解教程(基础)

    **CSS详解教程(基础)** CSS,全称为Cascading Style Sheets,中文译为层叠样式表,是一种用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的样式表语言。它的主要作用是将内容与表现分离,使得网页...

    网页优先级问题

    #### 二、CSS优先级规则详解 ##### 1. 特异性(Specificity) 特异性是指CSS选择器的优先级。一个更具体的样式规则通常会被认为比一个更通用的规则具有更高的优先级。具体来说: - 内联样式(例如`...

    CSS标签选择器优先级.pdf

    CSS选择器优先级详解 CSS选择器优先级是CSS样式表中一个非常重要的概念,它决定了CSS样式的应用顺序和优先级。本文将详细介绍CSS选择器优先级的四大原则,以及它们之间的关系和应用。 原则一:继承不如指定 如果...

    详解CSS的结构与层叠以及格式化

    【CSS的结构与层叠以及格式化】 在CSS(Cascading Style Sheets)中,结构、层叠和格式化是理解CSS布局的关键概念。首先,我们来看一下它们各自的概念: **结构** 每个HTML或XML文档都有一个结构树,它描述了文档...

    详解CSS中的选择器优先级顺序

    在CSS中,选择器优先级顺序是决定多个样式冲突时哪个样式生效的关键因素。它涉及到特殊性(Specificity)和重要性(!important)这两个概念。理解并熟练掌握这些规则对于编写高效且易于维护的CSS代码至关重要。 ...

    CSS详解-DIV布局!!

    3. **层叠与继承**:CSS的“级联”特性意味着当多个样式规则应用于同一元素时,将按照优先级决定最终效果。继承则允许子元素从父元素继承某些样式。 4. **盒模型**:CSS的盒模型是理解元素尺寸和布局的基础,包括...

    详解CSS中的选择器优先级及样式层叠问题解决

    首先,我们需要了解CSS选择器的优先级计算规则,它由四个级别组成: 1. ID选择器(如`#id`):每个ID选择器的权值为100。 2. 类选择器、属性选择器或伪类(如`.class`,`[attr]`,`:hover`):每个此类选择器的权值...

    CSS完全使用详解

    3. **优先级**: CSS的优先级由选择器的特殊性决定,内联样式 > 内部样式表 > 外部样式表,同级别的样式通过层叠原则决定最终效果。 ### 二、选择器 1. **基本选择器**: 类似于`*`(所有元素)、`#id`(ID选择器)、`.`...

    CSS详解及查询(有了它,css不成问题,可用于css查询,及学习)

    **CSS详解及查询** 在网页设计领域,CSS(Cascading Style Sheets)是不可或缺的一部分,它负责定义HTML或XML(包括SVG、XHTML等)文档的呈现方式。本资源主要针对CSS的学习和查询,旨在帮助用户全面理解CSS,并...

Global site tag (gtag.js) - Google Analytics