`
DBear
  • 浏览: 231063 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类

关于CSS Selector的优先级

阅读更多

用CSS这么些年,从来没从算法级别考虑过它的优先级原理,只是凭经验记住类似“id最大,class其次”这种tip。今儿看到一篇讲css优先级算法的文章,豁然开朗,引过来,记录一下。

 

其实CSS的算法就是下面这张图,

 


 

解释一下: 

 

CSS中主要有 style, #, .,tag,四种 selector 。按照顺序分别占据*,*,*,*的第1,2,3,4个位置。将一串层叠表达式中出现的selector分别在对应位置上叠加可得到一串数字。但需要比较css优先级时,只要比较这串数字即可。上面表中的例子不够鲜明,我们可以举个极端的例子。一个div,被11个div包含,本身既具有id又具有class。即:

 

 

<html>
<head>
<style type="text/css">
 .a1 .a2 .a3 .a4 .a5 .a6 .a7 .a8 .a9 .a10 .a11 .a12{color:red;}
#b{color:green;}
</style>
</head>
<body>
<div class="a1"><div class="a2"><div class="a3"><div class="a4"><div class="a5"><div class="a6"><div class="a7"><div class="a8"><div class="a9"><div class="a10"><div class="a11">
<div class="a12" id="b">
     CSS Selector的优先级
</div>
</div></div></div></div></div></div></div></div></div></div></div>

 

最里层的div拥有两个css串,第一个串的值是0,0,12,0,第二个串是0,1,0,0。两串值的比较是单纯的位比较,按照从第一位到第四位的比较顺序。因此第二个串的值比第一个大,这段代码的结果是字体成绿色。

 

 

我们做一个小的改动,给外层的其中一个div增加id属性,即

 

 

<html>
<head>
<style type="text/css">
 .a1 #b2 .a3 .a4 .a5 .a6 .a7 .a8 .a9 .a10 .a11 .a12{color:red;}
#b{color:green;}
</style>
</head>
<body>
<div class="a1"><div class="a2" id="b2"><div class="a3"><div class="a4"><div class="a5"><div class="a6"><div class="a7"><div class="a8"><div class="a9"><div class="a10">
<div class="a11">    
<div class="a12" id="b">
     CSS Selector的优先级
    </div>
</div>
</div></div></div></div></div></div></div></div></div></div>

 

此时,第一个串的值是0,1,11,0,第二个串是0,1,0,0。第二位相同,比较第三位,11>0,因此字体显示红色。

 

 

有人提出对于那些特殊的selector,如伪类,这个我再查找一下再给结论。

 

答:

伪类和属性选择与属性值一样,占据第三个位置,即 0,0,1,0

伪元素与一般元素一样,占据第四个位置,即0,0,0,1

继承属性、通配符对特殊性没有任何贡献

 

因为继承属性没有任何特殊性,所以对于某些元素继承的属性可能不会生效,原因是浏览器本身也有自己的样式表,比如超链接元素(a),可能:link会是蓝色,此时如果你不对a做专门的样式配置,那么它就会使用浏览器的样式。

 

 

有的时候,网站编程人员的样式表会与读者的样式表冲突,此时也有一个权重顺序。由大到小为:

1. 读者的重要声明

2. 开发人员的重要声明

3. 开发人员的正常声明

4. 读者的正常声明

5. 浏览器声明

  • 大小: 22.6 KB
分享到:
评论

相关推荐

    HTML5&CSS3网页制作:CSS优先级.pptx

    在多个CSS规则应用于同一元素时,理解CSS优先级至关重要,因为它决定了哪个样式会生效。这个概念对于创建美观且功能完备的网页至关重要。 首先,我们来探讨CSS优先级的基本原则: 1. 继承性:当一个元素没有明确的...

    CSS 学习笔记之CSS Selector

    ID在文档中必须是唯一的,因此ID选择器具有高优先级。使用方式是在`#`后跟ID名称,如`#header`。 3. 类选择器: 类选择器用于选取具有特定`class`属性的元素。`.nav`会选择所有`class`包含`nav`的元素。这在需要对...

    新手学习css优先级

    首先,需要了解CSS中的样式规则(CSSRule)是由选择符(Selector)和属性定义两部分组成的。选择符决定了哪些元素将会被该规则所选中。在多个CSS规则作用于同一个元素的情况下,会发生样式的覆盖。如果出现这种情况...

    CSS Training

    **一、CSS选择器(Example 1 - CSS Selector)** CSS选择器是CSS中最基础的部分,它决定了哪些HTML元素将应用特定的样式规则。例如,通配符选择器`*`应用于所有元素,ID选择器如`#myID`用于选取具有特定ID的元素,...

    CSS样式定义的优先级顺序介绍

    8. **通配符选择器**(Universal selector):`*{}`,优先级最低。 9. **伪类和伪元素**(Pseudo-classes and pseudo-elements):如`:hover`、`:first-child`等,其优先级根据具体情况而异,但通常比元素选择器高...

    CSS 基础使用.md

    - **定义**: 当存在样式冲突时,CSS遵循特定的优先级规则来决定哪个样式生效。 - **行内样式**: 最高优先级。 - **内嵌与外链样式表**: 相同优先级,后者覆盖前者。 - **浏览器默认样式与继承样式**: 较低优先级...

    CSS语法

    在《CSS2.0中文手册.chm》中,你可以找到更多关于这些特性的详细解释和示例代码,这对于学习和理解CSS2.0规范非常有帮助。通过实践这些知识,你将能够更自如地控制网页的视觉呈现,为用户提供更加美观和交互友好的...

    div+css div+css精通CSS

    CSS的基本语法由选择器(Selector)、属性(Property)和值(Value)三部分组成,其基本结构为: ```css Selector { property: value; } ``` ### 层叠顺序(Cascading Order) 当多个样式规则同时应用于同一元素...

    关于CSS的基本语法

    ### 关于CSS的基本语法 #### 一、CSS的基本构成与选择符 在Web开发中,CSS(层叠样式表)是一种用于控制网页外观的强大工具。它允许开发者通过编写简洁而有效的样式规则来定义HTML文档中的元素如何显示。本文将...

    前端开源库-has-id-selector

    `has-id-selector`是一个专门针对这一需求的开源库,它允许开发者检查CSS选择器字符串是否包含特定的ID。这个库对于优化代码和确保选择器的有效性具有显著价值。下面我们将详细探讨这个库的功能、使用方法以及在实际...

    css教程css理解

    selector { property: value; } ``` #### 五、CSS示例 - **颜色属性**: 可以使用多种方式指定颜色,例如: ```css body { color: blue; } /* 英文单词 */ p { color: #ff0000; } /* 十六进制颜色值 */ p {...

    css复习加学习加升值.pdf

    CSS 选择器优先级是指不同的选择器组合的优先级顺序。常用的优先级顺序有: * `!important`:最高优先级 * `inline style`:内联样式优先级 * `ID 选择器`:ID 选择器优先级 * `类选择器`:类选择器优先级 * `元素...

    css-cheat-sheet:CSS备忘单-CSS优点的参考

    2. **层叠和继承机制**:CSS的层叠机制允许优先级不同的规则共存,解决了样式冲突问题。而继承机制则使子元素自动获得父元素的某些属性,简化了开发工作。 3. **响应式设计**:CSS3引入了媒体查询(Media Queries)...

    CSS 标签说明字典

    7. **CSS优先级**:理解CSS的优先级规则至关重要,ID选择器的权重最高,接着是类选择器、属性选择器和元素选择器。内联样式(如`style="..."`)权重最高,内部样式表(如`&lt;style&gt;`标签)次之,外部样式表最低。当多...

    CSS简单教案

    CSS选择器优先级** 优先级从低到高:通用选择器、类型选择器、类选择器/属性选择器/伪类、ID选择器、内联样式。优先级相同的情况下,后来者居上(后定义的样式覆盖先定义的)。 **6. CSS3新特性** - **渐变...

    Eric Meyer谈css.pdf

    尽管提供的文件内容部分存在重复,并且有可能是扫描识别错误的结果,但基于标题和描述的信息,依然可以推测出上述关于CSS的功能和编写格式的知识点。希望这些信息能够对你学习和掌握CSS有所帮助。

    CSS基础知识汇总(代码+知识点框图)

    CSS的优先级遵循以下规则:内联样式 &gt; ID选择器 &gt; 类、属性和伪类选择器 &gt; 元素选择器。使用`!important`可以强制应用样式,但应谨慎使用。 **6. CSS响应式设计** 随着设备多样性的增加,响应式设计变得至关重要。...

Global site tag (gtag.js) - Google Analytics