CSS选择器的优先级学习

简介

有时候会遇到多种选择器对同一元素进行属性设置，一般项目中也会见到这样的代码，如下所示：

那么问题来了，p元素标签是显示什么颜色呢？结果是红色，如果不对选择器优先级有个大致了解恐怕很难知道这个元素背景颜色究竟是哪一个。

选择器的优先级

1. 比较通配与继承的优先级
   
   效果如下所示：可以看到span标签继承了p元素标签的属性设置,显示为黄色
   
   将css在增加如下设置：

    * {
        background-color: red;
        font-size: 30px;
    }

效果如下所示：可以看到字体大小明显变大，且背景颜色是红色覆盖

这里可以说明了继承是优先级最低的，比通配符还要低。
2. 比较元素、通配选择器的优先级

效果如下所示：可以看到p元素显示的金黄色而不是红色，证明了元素选择器优先级高于通配符选择器。

3. 元素选择器与类选择器比较

显示效果如下所示：可以看到p标签显示的棕色的，由此证明类选择器优先级高于元素选择器

4. 类选择器与id选择器优先级

实现效果如下所示：可以看到p元素是金黄色，由此可以说明id选择器优先级高于类选择器。

然后使用4类选择器都对p元素进行设置值。

根据优先级的顺序可知最好p元素显示的为金黄色，如下图所示：

然后我们在设置一下内联元素属性值如下所示：

根据优先级可知内联元素优先级最高，最后显示为蓝色。

总结

• 内联样式 优先级 1000
• id 选择器 优先级 100
• 类和伪类 优先级 10
• 元素选择器 优先级 1
• 通配* 优先级0
• 继承没有优先级