CSS选择器以及权重

选择器的权重（由低到高）

通配符选择器  < 元素选择器  <  类选择器  <   id选择器  <  内联样式  <   !important 

权重最低的是继承,然后就是通配符选择器

* {
  margin: 0;
  padding: 0
}

然后是元素选择器

div {
  border: 1px solid #ccc
}

然后就到了类选择器

<div class="box"></div>
.box {
  width: 200px;
  height: 200px;
}

然后就是id选择器

<div id="box"></div>
#box {
  width: 200px;
  height: 200px;
}

之后是内联样式，也可以说是行内样式

<div style="width:200px;height:200px"></div>

如果是复合选择器的话，权重会叠加

<div class="box1">
  <div class="box"></div>
</div>

例如上面这段代码 .box1 box {}  这样写的权重比 .box大，但是权重不会越级，比如我们常常把类选择器的权重比作10，id选择器的权重比做100,但是复选11个类选择器的权重也是小于id选择器的

权重最高的就是加!important   

div {
  color: pink!important;
}