CSS选择器优先级详解

1. 优先级分级

按照优先级从高到低排列：

1. ! important

.foo{
	color:red !important
}

!important是顶级优先级，唯一推荐使用它的场景为忽略JS脚本设置的样式，使js设置样式无效。对于其他场景都没有使用它的理由，切勿滥用

2. style属性内联样式

<span style="color:red">红色</span>

3. ID选择器

#foo{
	color:red
}

4. class类选择器，属性选择器和伪类

.foo{
	color:red 
}
[disabled]{
	color:red 
}
:hover{
	color:red
}

5. 标签选择器

body{
	color:red 
}

6. 通配选择器，选择符和逻辑组合伪类

*{
	color:red 
}
:not(){
	color:red 
}

统配选择器统一指*

选择符包括+，-，~，空格和||

逻辑组合伪类包括:not()，:is()，:where()等，这些伪类本身并不影响CSS优先级，影响优先级的是()里的选择器

2. 优先级计算

除开!important和style属性内联样式（因为一个第一顶级的优先级，另一个是写在HTML标签属性上的第二顶级优先级），在CSS样式中写的选择器样式的优先级满足以下计算规则：

• 每出现一个ID选择器，优先级数值+100
• 每出现一个class，属性或伪类选择器，优先级数值+10
• 每出现一个标签选择器，优先级数值+1
• 每出现一个通配选择器，选择符和逻辑组合伪类，优先级数值+0
• 继承的CSS样式优先级为0
• 若两个选择器最终优先级计算数值相等，则后渲染的选择器优先级更高（后渲染是相对整个HTML文档的CSS样式渲染顺序来讲的，并非单个CSS文件）

示例：

 	/*优先级为1+0+10=11*/
    a:not([rel=nofollow]){

    }
    /*优先级为1+10+0+10=21*/
    body.foo:not([dir]){

    }

    /*优先级为100+10+1=111*/
    #foo .bar p{

    }

增加CSS选择器优先级的方法:

实际开发调节样式时，难免会遇到需要增加CSS选择器优先级去匹配样式的场景，

.foo{}

很多人是采取增加CSS样式嵌套来增加优先级数值的做法，如下：

.father .foo{}

但是这种做法增加了CSS样式与HTML结构的耦合度，降低了可维护性。

下面是一种推荐的做法：

/*重复选择器自身即可*/
 .foo.foo{}

3. 注意事项

• CSS选择器优先级与DOM元素的层级位置没有关系

  示例：

<div class="foo">
  是的
</div>

body .foo{
        color:red
    }
html .foo{
     color:blue
 }

这里虽然第二个选择器在第一个选择器渲染后，但有人会考虑到body是html的子元素，距离.foo元素更近，所以应该是红色。但是DOM层级距离是对CSS选择器优先级没有任何影响的，所以按照优先级数值相等，后渲染优先的原则，.foo元素是蓝色

• 选择器优先级越级现象

示例：

  	#text{
        color:red
    }
    .text{
        color:blue
    }

<span class="text" id="text">颜色是？</span>

根据id选择器 优先级大于class选择器的原则可知应该是红色。但是如果是下面这种情况呢？

    /*如果有256个.text组合而成的选择器*/
    .text.text.text.text...{
        color:blue
    }

有人认为class选择器优先级数值为10，如果同时256个，那肯定比只有一个id的id选择器优先级高！

实际上，在过去大多浏览器确实是这样的，FireFox浏览器早年的源码表示class类名以8字节字符串存储，所能容纳的最大值为255，超过就会溢出到ID选择器区域。

但是后来除了IE浏览器，其他浏览器都修改了策略——再多的选择器优先级也无法超过比它更高一级的选择器

所以这里的文字颜色依然是红色