CSS优先级

最近想要总结下基础知识，CSS是我感觉一直没有学好的东西，先从简单的开始，总结下css的表现优先级（谁的优先级高，谁的样式设置就会表现出来）

普通样式

优先级	名称	说明
1	内嵌样式	直接写在元素标签style里，如style="background-color:blue;"
2	id选择器	通过id选择元素，进行样式设置(一般不推荐),如#name{background-color: blueviolet;}
3	类选择器	通过class选择元素，进行样式设置(推荐)，如.block{background-color: aquamarine;}
4	标签选择器	通过标签名字选择元素，进行样式设置(推荐)，如div{background-color: aquamarine;}
5	通配符选择器(*)	选择所有元素，一般会用来设置整个项目的基础样式，如*{box-sizing: border-box;}

上面的规则可以总结如下：

首先，有内嵌样式的话，它的优先级最高，会表现出来；如果没有内嵌样式，有id选择器进行样式设置的话，那么这个样式的优先级最高，以此类推

#name {
  background-color: blueviolet;
}

.common {
  width: 100px;
  height: 100px;
  background-color: aliceblue;
}

div{
  background-color: #111;
}

*{
  background-color: #fff;
}

<div class="common" id="name" style="background-color:blue;"></div>
复制代码

在线示例

多个相同优先级的样式

如果有多个相同优先级的样式，最近的优先级高（包括外联样式）

.common {
  width: 100px;
  height: 100px;
  background-color: yellow;
}

.block {
  background-color: green;
}

div {
  background-color: #111;
}

* {
  background-color: #fff;
}
<div class="common block" id="name"></div>
复制代码

在线示例

!important

!important是一个比较特殊的样式声明方式，它拥有样式声明的最高优先级，但是一般情况下我们不使用。一旦css属性最后使用了!important，那么该样式拥有最高优先级，多个!important的情况下，最近的优先级高。

.block {
  background-color: aquamarine !important;
}
复制代码

#name {
  background-color: blueviolet;
}

.common {
  width: 100px;
  height: 100px;
  background-color: green !important;
}

.block {
  background-color: yellow !important;
}

div {
  background-color: #111;
}

* {
  background-color: #fff;
}

<div class="common block" id="name" style="background-color:blue;"></div>
复制代码

在线示例

转载于:https://juejin.im/post/5bce84f751882578116cc0ac