css 优先级算法及权重

一、基本概念

权重:根据元素选择器的不同和先后顺序的不同来决定哪一条规则被浏览器选中并作用于元素

优先级:不同css样式作用于同一元素,变根据优先级来判断哪种css样式生效

一般我们的优先级是:行内样式>ID选择器>类,属性选择器和伪类选择器>元素和伪元素

说明:

1、行内样式,指的是html文档中定义的style


行内样式包含在你的html中 对你的元素产生直接作用,比如:


<h1 style="color: #fff;">header</h1>
2、ID选择器


Id也是元素的一种标识,比如#div


3、类,属性选择器和伪类选择器


这一类包括各种class,属性选择器,伪类选择器比如 :hover,:focus等等。


4、元素和伪元素选择器(::after,::before,::first-letter,::first-line,::selecton
元素跟伪元素选择器,比如:before 与 :after.
---------------------------------------------------------------------------------------------------------------------------------

二、优先级算法

选择器的特殊性值表述为4个部分,用0,0,0,0表示。

ID选择器的特殊性值,加0,1,0,0。
类选择器、属性选择器或伪类,加0,0,1,0。
元素和伪元素,加0,0,0,1。
通配选择器*对特殊性没有贡献,即0,0,0,0。
最后比较特殊的一个标志!important,它没有特殊性值,但它的优先级是最高的,为了方便记忆,可以认为它的特殊性值为1,0,0,0,0。

特殊情况:如果对同一元素的两个css规则权重相同,则后面的规则优先级高
for example~

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
		a{color: yellow;} /*特殊性值:0,0,0,1*/
		div a{color: green;} /*特殊性值:0,0,0,2*/
		.demo a{color: black;} /*特殊性值:0,0,1,1*/
		.demo input[type="text"]{color: blue;} /*特殊性值:0,0,2,1*/
		.demo *[type="text"]{color: grey;} /*特殊性值:0,0,2,0*/
		#demo a{color: orange;} /*特殊性值:0,1,0,1*/
		div#demo a{color: red;} /*特殊性值:0,1,0,2*/
</style>
</head>
<body>
<a href="">第一条应该是黄色</a> <!--适用第1行规则-->
<div class="demo">
    <input type="text" value="第二条应该是蓝色" /><!--适用第4、5行规则,第4行优先级高-->
    <a href="">第三条应该是黑色</a><!--适用第2、3行规则,第3行优先级高-->
</div>
<div id="demo">
    <a href="">第四条应该是红色</a><!--适用第6、7行规则,第7行优先级高-->
</div>
</body>
</html>

效果:



ps:该优先级算法是一般情况,如果有255个类选择器可能优先级会大于ID选择器,在IE11 和火狐的某版本就会这样。

有关!important的用法与使用场景参见

https://www.w3cplus.com/css/the-important-css-declaration-how-and-when-to-use-it.html


<think>我们正在回答用户关于CSS选择器类型及其优先级计算的问题。根据用户提供的引用内容,我们可以整理出以下信息: 1. **CSS选择器的类型**: - 引用[1]和[3]提到了常见的选择器类型:ID选择器、类选择器、属性选择器、伪类选择器、元素选择器、伪元素选择器、通配符选择器等。 - 引用[4]还提到CSS3新增的选择器,如层次选择器(例如`p~ul`)、伪类选择器(`:first-of-type`, `:last-of-type`, `:only-of-type`, `:only-child`, `:nth-child(n)`, `:nth-last-of-type(n)`, `:last-child`, `:root`, `:empty`, `:enabled`, `:disabled`, `:checked`, `:not(selector)`)和属性选择器(`[attribute*=value]`, `[attribute^=value]`, `[attribute$=value]`)。 2. **优先级计算**: - 引用[1]和[3]详细说明了优先级规则。优先级由高到低排列为: - `!important`(最高优先级) - 内联样式(直接在元素的style属性中定义) - ID选择器 - 类选择器、属性选择器、伪类选择器(三者优先级相同) - 元素选择器、伪元素选择器(两者优先级相同) - 通配符选择器、继承(优先级最低) - 引用[3]还给出了优先级计算方法:将选择器分解后,计算权重(4位数字,从左到右分别是内联样式、ID选择器、类/属性/伪类、元素/伪元素),然后比较权重值。 因此,我们可以将回答分为两部分:选择器类型和优先级计算。 ### 选择器类型 根据引用内容,CSS选择器可以分为以下几类: 1. **基本选择器**: - 元素选择器(如`p`) - 类选择器(如`.class`) - ID选择器(如`#id`) - 通配符选择器(如`*`) 2. **属性选择器**(如`[attribute]`, `[attribute=value]`, `[attribute*=value]`等) 3. **伪类选择器**(如`:hover`, `:first-child`, `:nth-child(n)`等) 4. **伪元素选择器**(如`::before`, `::after`) 5. **组合选择器**: - 后代选择器(空格,如`div p`) - 子元素选择器(`>`,如`div > p`) - 相邻兄弟选择器(`+`,如`div + p`) - 通用兄弟选择器(`~`,如`div ~ p`) 6. **CSS3新增选择器**(如引用[4]中提到的层次选择器、新的伪类选择器等) ### 优先级计算 优先级是通过权重(specificity)来计算的,权重由4个部分(a, b, c, d)组成: - a: 内联样式的数量(1或0) - b: ID选择器的数量 - c: 类选择器、属性选择器、伪类选择器的数量 - d: 元素选择器、伪元素选择器的数量 注意:通配符选择器(`*`)和继承的样式没有权重,即0,0,0,0。 计算规则: 1. 每个选择器按上述规则计算权重,然后相加(注意:不会进位,即每个部分独立计算)。 2. 比较时从左到右依次比较a、b、c、d的值,数值大的优先级高。 3. 如果权重相同,则后出现的样式覆盖先出现的样式。 4. `!important`具有最高优先级,会覆盖所有其他声明(包括内联样式),但应谨慎使用。 示例: - `#header .nav li`:1个ID选择器(b=1),1个类选择器(c=1),1个元素选择器(d=1) → 权重为0,1,1,1 - `div p`:2个元素选择器(d=2) → 权重为0,0,0,2 因此,第一个选择器的优先级更高。 另外,引用[2]中给出了一个例子:类选择器的优先级大于元素选择器。 ### 回答结构 1. 先介绍CSS选择器的类型(分类列出)。 2. 再详细说明优先级计算规则(包括权重计算和比较规则)。 3. 给出示例帮助理解。 注意:在回答中适当引用用户提供的引用内容(在末尾添加引用标识)。</think>### CSS 选择器类型及优先级计算详解 #### 一、CSS 选择器类型 根据功能和应用场景,CSS 选择器可分为以下 7 大类: 1. **基本选择器** - 元素选择器:`p`, `div` - 类选择器:`.class` - ID 选择器:`#id` - 通配符选择器:`*`(匹配所有元素) 2. **属性选择器** - `[attr]`:存在属性 - `[attr=value]`:精确匹配 - `[attr^=value]`:开头匹配(CSS3) - `[attr$=value]`:结尾匹配(CSS3) - `[attr*=value]`:包含匹配(CSS3) 3. **伪类选择器** - 状态类:`:hover`, `:active`, `:focus` - 结构类:`:first-child`, `:last-child` - CSS3 新增: - `:nth-child(n)` - `:only-of-type` - `:enabled`/`:disabled` - `:not(selector)`(反向选择) 4. **伪元素选择器** - `::before`, `::after` - `::first-line`, `::first-letter` - `::selection`(文本选中样式) 5. **组合选择器** - 后代:`div p` - 子元素:`div > p` - 相邻兄弟:`div + p` - 通用兄弟:`div ~ p`(CSS3) 6. **层次选择器**(CSS3) - `p~ul`:选择前面有 p 的 ul 7. **特殊选择器** - `:root`(HTML 根元素) - `:empty`(空元素) - `:checked`(选中表单元素)[^4] #### 二、优先级计算规则 优先级由 **权重累加值** 决定,权重分为 4 个等级(从高到低): | 选择器类型 | 权重值 | 示例 | |--------------------------|--------|----------------| | 1. `!important` | ∞ | `color: red !important;` | | 2. 内联样式 | 1,0,0,0| `<p style="...">` | | 3. ID 选择器 | 0,1,0,0| `#header` | | 4. 类/属性/伪类选择器 | 0,0,1,0| `.btn`, `[type="text"]`, `:hover` | | 5. 元素/伪元素选择器 | 0,0,0,1| `div`, `::before` | | 6. 通配符/继承 | 0,0,0,0| `*`, 继承的样式 | **计算步骤**: 1. 将选择器拆分为独立组件 2. 按权重等级累加每个组件的值 3. **从左到右** 逐级比较权重值(无进位机制) 4. 权重相同时,后定义的样式生效[^1][^3] #### 三、优先级计算示例 ```css /* 权重: 0,1,0,1 (ID + 元素) */ #nav li { color: blue; } /* 权重: 0,0,2,1 (类×2 + 元素) */ .menu .item { color: red; } /* 生效(0,0,2,1 > 0,1,0,1) */ /* 权重: 0,0,1,0 (伪类) */ a:hover { text-decoration: underline; } ``` > 💡 **关键规则**: > - 1 个 ID 选择器 > 100 个类选择器(因比较机制是逐级判断) > - `!important` 可覆盖所有规则(慎用) > - 内联样式优先级高于外部样式表[^3] #### 四、CSS3 新增选择器优先级 新增选择器按基础类型归类计算: - 层次选择器 `p~ul` → 元素选择器(0,0,0,2) - 属性选择器 `[href^="https"]` → 属性选择器(0,0,1,0) - 伪类 `:nth-child(2)` → 伪类选择器(0,0,1,0)[^4] > 优先级本质是 **选择器特异性(Specificity)** 的量化体现,理解权重计算可避免过度依赖 `!important`[^1][^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值