css-样式优先级算法

1.多重样式优先级

多重样式(Multiple Styles):

如果外部样式、内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况。

一般情况下,优先级如下:

(外部样式)External style sheet <(内部样式)Internal style sheet <(内联样式)Inline style

有个例外的情况,就是如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式。

   <style type="text/css">
     /* 内部样式 */
     h3{color:green;}
   </style>

    <!-- 外部样式 style.css -->
   <link rel="stylesheet" type="text/css" href="style.css"/>
2.CSS样式优先级算法如何计算?
  1. 内联样式表的权值最高 1000;
  2. ID 选择器的权值为 100
  3. Class 类选择器的权值为 10
  4. HTML 标签选择器的权值为 1

1.css优先级

是由四个级别和各个级别出现的次数决定的,值从左到右,左面的最大,一级大于一级

2.优先级算法

每个规则对应一个初始四位数:0,0,0,0

若是行内样式优先级,则是1,0,0,0,高于外部定义

<div style=”color: red”>sjweb</div>

若是ID选择符,则分别加0,1,0,0

若是类选择符,属性选择符,伪类选择符,则分别加0,0,1,0

若是元素选择器,伪类选择器,则分别加0,0,0,1

3.需要注意

!important的优先级是最高的,但出现冲突时则需比较”四位数“

优先级相同时,则采用就近原则

继承得来的属性,其优先级最低

4.实例

body div p{color: green;}--Specificity值为0,0,0,3
Div # sjweb { font-size:12px;}--Specificity值为 0,1,0,1
html > body div [id=”totals”] ul li > p {color:red;}--Specificity值为 0,0,1,6
<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]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值