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属性中声明的样式。

比如下面代码：

<style type="text/css"> 
div{ color:red !important; }  
</style> 
<div style="color: blue; ">这是一行文字</div> 

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

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

• !important
• 内联样式（1000）
• ID选择器（0100）
• 类选择器/属性选择器/伪类选择器（0010）
• 元素选择器/伪元素选择器（0001）
• 关系选择器/通配符选择器（0000）