CSS 选择器优先级计算

2021-01-15 01:14

阅读:830

标签:radio   改变   无限   html标签   标签   sele   选择器   属性选择器   伪类   

选择器优先级:

  抄录MDN的原话是:优先级就是分配给指定的 CSS 声明的一个权重,它由 匹配的选择器中的 每一种选择器类型的 数值 决定。而当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候,CSS 中最后的那个声明将会被应用到元素上。当同一个元素有多个声明的时候,优先级才会有意义。因为每一个直接作用于元素的 CSS 规则总是会接管/覆盖(take over)该元素从祖先元素继承而来的规则。

 

选择器分类:

类型选择器:

  类型选择器包括:标签选择器,例如:h1、p、div等等html标签;伪元素选择器,例如::before、::after、::selection等等为元素。

类选择器:

  类选择器一般而言我们第一时间肯定会想到class选择器,但是其实类选择器好包括属性选择器(例如,[type="radio"])和伪类(例如,:hover)。

ID选择器:

  ID选择器就只有一个ID选择器了。

 

权重计算:

  假设一个选择器的原始权重是0.0.0.0,从左到右分别代表千位、百位、十位、个位,然后我们把上面所说到的选择器分别放到这个原始权重中去,规定它的权重。

选择器 权重计算,原始值0.0.0.0
类型选择器 0.0.0.1
类选择器 0.0.1.0
ID选择器 0.1.0.0
内联样式 1.0.0.0
!important

+∞ 无穷大

  这里不再啰嗦内敛样式和important,但是提一下基本的注意事项:

  1. 内联样式一般都是在通过JS操作样式表的时候使用的,我们在编写CSS样式的时候基本不会使用到,因为这不利于维护。
  2. important 的使用要非常谨慎,尽量不要使用,因为一旦使用了important就意味着获取到了无限的权限,如果一个样式被多个DOM使用,可能会导致多个样式发生改变。
  3. 如果权重相同时,根据浏览器的解析,是从上到下解析的,所以是后面的样式将会覆盖前面的样式。

 

CSS 选择器优先级计算

标签:radio   改变   无限   html标签   标签   sele   选择器   属性选择器   伪类   

原文地址:https://www.cnblogs.com/littleppig/p/13399270.html


评论


亲,登录后才可以留言!