样式的层级关系,选择器优先级

时间:2020-05-01

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

继承:即子类元素继承父类的样式;

优先级:是指不同类别样式的权重比较;

层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式。

!important

div{
    background-color: red !important;
}

行内样式

<div id="box1" style="background-color: red;">box1</div>

ID选择器

#box1 {
    width: 100px;
    height: 100px;
    background-color: #2e7ae5;
}

类选择器 

.box1{
    background-color: #000;
}

标签

div{
    background-color: red;
}

通配符

* {
    margin: 0;
    padding: 0;
}