CSS样式优先级及穿透

html-css014

CSS样式优先级及穿透,第1张

CSS优先级是根据等级的值相加得出选择器的权重来决定的。

!important >行内样式 >ID >类、伪类、属性 >标签名 >继承 >通配符

计算权重方式：

从图上看讲权重分为：

1. 第一等：代表内联样式，如: style=””，权值为1000。

2. 第二等：代表ID选择器，如：#content，权值为0100。

3. 第三等：代表类，伪类和属性选择器，如.content，权值为0010。

4. 第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。

5. 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。

6. 继承的样式没有权值。

当权重一样时遵循准则：

1. 选择器越 具体 优先级越 高

2. 在同一个级别的情况下， 最后 指定的规则优先级就越 高 ，也就是我们通常说的就近原则；

权重计算例子：

1. li  ->0 0 0 1 权重为 1

2. h1 + *[rel=up] ->0 0 1 1 这个相邻选择器由标签选择器与属性选择器组成，属性选择器为10，因此权重为11

3. ul ol li.red ->0 0 1 3 权重为13

4 li.red.level ->0 0 2 1 权重21

1. !important  （width: 100% !important）

2. 行内样式   (style="width:100%")

3. id选择器  (#myIdName)

4. class选择器  (.myClassName)

5. 标签选择器  (div,h1,p)

1. 使用 " >>>" 符号，这种方式主要是用于普通css，方式为：

  外层 >>>第三方组件样式： .wrapper >>>.swiper-pagination { color: #eee  }

2. 使用 "/deep/" ,这种方式主要用于sass或less，方式为：

外层 /deep/ 第三方组件样式： .wrapper /deep/ .swiper-pagination { color: #eee  }

css优先级有6级。

0级：通配选择器、选择符和逻辑组合伪类。

通配选择器是 * 。

选择符有+、-、~、空格和 || 。

逻辑组合伪类有 :not()、:is()和 :where。这些伪类影响优先级的是括号里的选择器。

eg: :not([rel=nofollow])

1级：标签选择器。

2级：类选择器、属性选择器和伪类。

3级：ID选择器

4级：内联选择器

5级：!important

（1）数值计算法

0级--优先级为0；

1级--优先级为1；

2级--优先级为10；

3级--优先级为100。

（2）后来居上

优先级数值相同情况下，越后面优先级越高。

1.增加css选择器优先级的方法

（1）重复选择选择器自身

.foo.foo {}

（2）借助必然会存在的属性选择器

.foo[class] {}

#foo[id] {}

除了这两种方法，常用的是增加父级嵌套和增加标签选择器，但这种方法增加了耦合，降低了可维护性，不建议使用。

2.数值计算法的点评

不同级别的选择器优先级差距并不是10比1，差距比这大得多，而是因为实际开发中不会连续写10个而已。

在ie浏览器下，256个类选择器的优先级大于id选择器的优先级，原因是类名是以8字节存储的，8字节所能容纳的最大值就是255.

除了ie外，其他都使用16进制，不会出现这种情况。

了解css选择器的优先级后，日常工作就知道是怎么回事了。

是因为默认的优先级高于设置的优先级，所以显示不正确。