前端面试之CSS优先级顺序

1、下面是CSS优先级顺序由高到低

优先级最高的-!important

用法是写在普通css属性的后面，这样就能实现最高级的css了，css样式写法如下

2、下面是CSS优先级顺序由高到低

行内样式

行内样式是通过style=“”，这样直接写在标签里面，css样式写法如下

3、下面是CSS优先级顺序由高到低

ID选择器

ID在html中是唯一的，通过#加名字，css样式写法如下

4、下面是CSS优先级顺序由高到低

类选择器

类在css通过class来命名，使用方法是.加名字，css样式写法如下

5、下面是CSS优先级顺序由高到低

标签

标签指div,p,span这种，css样式写法如下

6、下面是CSS优先级顺序由高到低

通配符

经常用的有*，它会把所有的样式都改变，一般用来重置样式，写法如下

7、下面是CSS优先级顺序由高到低

继承

指的是父标签设置样式，而子标签没有设置样式，子标签会继承父标签的样式

一般用于文本文字，例如font-size，color等

详细写法如下

8、下面是CSS优先级顺序由高到低

浏览器默认样式

每个浏览器的默认样式都不同，为了统一开发样式，我们一般都会设置一个重置样式，下图为谷歌浏览器自带的padding属性为8px，

9、最后总结一下：CSS优先级顺序

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认样式