CSS选择器以及优先级（css选择器优先级最高的是）

balukai 2025-03-25 10:53:52 文章精选 4 ℃

CSS选择符分类

1.标签选择器(如：body,div,p,ul,li)

2.类选择器

3.ID选择器

4.全局选择器(如：*号)

5.组合选择器(如：.head .head_logo,注意两选择器用空格键分开)

6.后代选择器 (如：#head .nav ul li 从父集到子孙集的选择器)

7.群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显示

8.继承选择器(如：div p,注意两选择器用空格键分开)

9.伪类选择器(如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。)

10.字符串匹配的属性选择符(^ $ *三种，分别对应开始、结尾、包含)

11.子选择器 (如：div>p ,带大于号>)

12.CSS 相邻兄弟选择器器 (如：h1+p,带加号+)

例如同时两个选择器给同一个元素设置相同的属性，那么最终设置为哪个呢？这就要按照优先级来了

内连样式优先级 1000

id 选择器优先级 100

类选择器优先级 10

元素选择器优先级 1

统配选择器优先级 0

继承的样式优先级没有

以上的优先级先满足高的。

总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

注意：

1.如果是两种相同优先级为同一个元素同一个属性设置的话，是哪个写在代码靠后最终就按那个的样式

2.交集选择器的优先级所有优先级加起来运算然后比较

3.并集的话就是各算各的。

!important声明强制优先

CSS优先级中还有一个最无敌的声明，就是!important。

在CSS样式表中，带有!important声明的样式优先使用，它的优先级会超越任何地方、任何方式的样式声明，包括行内style属性中声明的样式。

比如下面代码：

 
这是一行文字

这里的这行文字在浏览器中仍然显示为红色字体。

所以，CSS样式匹配的优先权遵循以下顺序：