CSS之优先级（6大类）、权重（4等级）、从高到低优先顺序

秒速五厘米 2022-11-16 10:48 119阅读 0赞

**目录**

一、css优先级 的 6大分类

二、css优先级 的 优先顺序

三、选择器 的 权重及优先规则

四、权重 的 4个等级定义

五、权重 的 优先顺序

六、利用权重值比较优先级

--------------------

### 一、css优先级 的 6大分类 ###

通常可以将css的优先级由高到低分为6组：

第一优先级：无条件优先的**属性**只需要在属性后面使用！important。它会覆盖页面内任何位置定义的元素样式。ie6不支持该属性。

第二优先级：在html中给元素标签加style，即**内联样式**。该方法会造成css难以管理，所以不推荐使用。

第三优先级：由一个或多个**id选择器**来定义。例如，\#id\{margin:0;\}会覆盖.classname\{margin:3pxl\}

第四优先级：由一个或多个**类**选择器、属性选择器、伪类选择器定义。如.classname\{margin:3px\}会覆盖div\{margin:6px;\}

第五优先级：由一个或多个类型**选择器**定义。如div\{marigin:6px;\}覆盖\*\{margin:10px；\}

第六优先级：**通配选择器**，如\*\{marigin:6px;\}

--------------------

### 二、css优先级 的 优先顺序 ###

**行内样式（style="…"）>ID 选择器(\#box\{…\})>类选择器(.con\{…\})>标签选择器(dic\{…\})>通用选择器(\*\{…\})**

--------------------

### 三、选择器 的 权重及优先规则 ###

在css中，会根据**选择器的特殊性**来决定所定义的样式规则的次序，具有**更特殊选择器的规则优先于一般选择器的规则**。如果两个规则的特殊性相同，那么后定义的规则优先。

那么如何计算选择器的特殊性呢？那就要用到选择器的权重计算了。计算规则如下图：  
![Center][]

--------------------

### 四、权重 的 **4个等级定义** ###

我们把**特殊性**分为4个等级，每**一个等级代表一类选择器，没个等级的值相加得出选择器的权重。**

**4个等级的定义如下：**

第一等级：代表**内联样式**，如style=""，权值为 1000

第二等级：代表**id选择器**，如\#content，权值为100

第三等级：代表**类，**伪类和属性选择器，如.content，权值为10

第四等级：代表**标签选择器和伪元素选择器**，如div p，权值为1

**注意：**通用选择器（\*），子选择器（>），和相邻同胞选择器（+）并不在这个等级中，所以他们的权值为0

--------------------

### 五、权重 的 优先顺序 ###

**行内样式（1000）>ID选择器（100）>类选择器（10）>标签选择器（1）>通用选择器（0）**

--------------------

### 六、利用权重值比较优先级 ###

1. 权重值越大，优先级越高

2. 选择器选择的范围越小越精确，优先级越高

eg：

#box p .tt =100+1+10
    #box .tt =100+10

[Center]: /images/20221022/b6309aa35d6c45bf96e9d7f99db67934.png

发表评论取消回复

表情：

评论列表（有 0 条评论，119人围观）

还没有评论，来说两句吧...

相关阅读

相关 Spring Boot 加载文件的优先级从高到低依次顺序

Spring Boot 文章目录 [Spring Boot 加载文件的优先级,如何加载配置文件][Spring Boot] [如何使用SpringBoot全局异常处理

Myth丶恋晨/ 2024年03月24日 15:42/ 0 赞/ 28 阅读

相关 css权重(css权重优先级)

什么是权重，权数？在数学方面，表示某个数据出现的频率、次数叫权重或者权数。 ![css权重(css权重优先级)\_css权重(css权重优先级)][css_css_c

待我称王封你为后i/ 2023年09月26日 13:16/ 0 赞/ 39 阅读

相关 c语言运算符优先级(c语言运算符优先级由高到低的顺序)

C语言符号优先级的排列顺序分为优先级15级： 1、圆括号【()】、下标运算符【\[\]】、分量运算符的指向结构体成员运算符【->】、结构体成员运算符【.】； 2、

我会带着你远行/ 2023年09月26日 12:34/ 0 赞/ 33 阅读

相关 CSS标签的权重优先级

优先级身为CSS中的三大特性之一，可以说是非常重要的。当我们给本标签的样式或者他的类名、ID以及他的父级上的样式上规定了一样的属性，那么该标签在页面上按照谁规定的来显示？这需要

水深无声/ 2023年06月17日 10:54/ 0 赞/ 41 阅读

相关 CSS的元素优先级和权重

<table> <thead> <tr> <th>继承和</th> <th>0.0.0.0</th> </tr> </thead> <t

た入场券/ 2022年12月01日 11:59/ 0 赞/ 223 阅读

相关 CSS之优先级（6大类）、权重（4等级）、从高到低优先顺序

目录一、css优先级的 6大分类二、css优先级的优先顺序三、选择器的权重及优先规则四、权重的 4个等级定义五、权重的优先顺序六、利用权

秒速五厘米/ 2022年11月16日 10:48/ 0 赞/ 120 阅读

相关【CSS】css特殊性-优先级-权重

注：文章来源：《css权威指南》第三章。部分未予记录 css选择器可以用多种方式去选择元素，实际上一个元素可以由使用两个或者多个规则来匹配，每个规则都有各自的选择器。请看

古城微笑少年丶/ 2022年09月26日 14:54/ 0 赞/ 289 阅读

相关 CSS选择器的权重及优先级

最近在牛客网上刷题遇到过各类选择器优先级的比较问题，经查阅，现总结如下：总体来说：内联样式 > id>class=属性选择器=伪类选择器=伪元素选择器>标签，大致分为四个等

r囧r小猫/ 2022年05月30日 05:40/ 0 赞/ 366 阅读

相关从 CSS 的权重规则看选择器及优先级

一、CSS权重规则 -------------------- CSS 的权重规则是学习 CSS 时非常重要的一个概念，每个选择器都有自己的权重。每条css规则，都包

一时失言乱红尘/ 2022年05月27日 05:43/ 0 赞/ 251 阅读

相关 css 权重、权值（标签优先级）

css 权重、权值（标签优先级）！important 最高行内：1000 id:100 class:10 tag:1 \box>div\{\}=>

缺乏、安全感/ 2021年07月26日 02:48/ 0 赞/ 530 阅读