【css权值】

小咪咪 2022-01-05 08:05 181阅读 0赞

## 什么是权值 ##

在css当中有多种选择器，它们的权值是不同的，看下图

![format_png][]

我们把特殊性分为4个等级，每个等级代表一类选择器，每个等级的值为其所代表的选择器的个数乘以这一等级的权值，最后把所有等级的值相加得出选择器的特殊值。

4个等级的定义如下：

1.  第一等：代表内联样式，如: style=””，权值为1000。
2.  第二等：代表ID选择器，如：\#content，权值为100。
3.  第三等：代表伪类和属性选择器，如.content，权值为10。
4.  第四等：代表类型选择器和伪元素选择器，如div p，权值为1。

例如上图为例，其中\#NAV为二等选择器，.ACTIVE为三等选择器，UL、LI和A为四等选择器。则整个选择器表达式的特殊性的值为1\*100+1\*10+3\*1=113

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTY3OTM0_size_16_color_FFFFFF_t_70][]

# CSS有什么特殊性?（优先级、计算特殊值） #

**优先级**

(1)、同类型，同级别的样式后者先于前者  
(2))、ID > 类样式 > 标签 > \*  
(3)、内联>ID选择器>伪类>属性选择器>类选择器>标签选择器>通用选择器(\*)>继承的样式  
   
(4)、具体 > 泛化的，特殊性即css优先级  
(5)、近的 > 远的 (内嵌样式 > 内部样式表 > 外联样式表)  
  内嵌样式：内嵌在元素中，<span style="color:red">span</span>  
  内部样式表：在页面中的样式，写在<style></style>中的样式  
      外联样式表：单独存在一个css文件中，通过link引入或import导入的样式  
(6)、!important 权重最高，比 inline style 还要高

**计算特殊性值**

important > 内嵌 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符  
权重、特殊性计算法：   
CSS样式选择器分为4个等级，a、b、c、d  
(1)、如果样式是行内样式（通过Style=“”定义），那么a=1，1,0,0,0   
(2)、b为ID选择器的总数 0,1,0,0   
(3)、c为属性选择器，伪类选择器和class类选择器的数量。0,0,1,0  
(4)、d为标签、伪元素选择器的数量 0,0,0,1  
(5)、!important 权重最高，比 inline style 还要高  
比如结果为：1093比1100，按位比较，从左到右，只要一位高于则立即胜出，否则继续比较。

![format_png 1][]

[format_png]: /images/20211229/54b4368a5c2b4057a8a00d4310613a9c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTY3OTM0_size_16_color_FFFFFF_t_70]: /images/20211229/ec650b9a4c194bde883b8103e078b176.png
[format_png 1]: /images/20211229/9093a74fe8704dbe96d46ff329dc3b8c.png