1.层叠性
- 样式冲突，就近原则（最后覆盖原则）
- 样式不冲突，不会覆盖
注意点
说是就近原则，但其实不是根据设置样式的语句和html语句的距离，其实是最后设置的样式，即从上往下执行，由最后一个样式覆盖之前重复的样式。
如果你把style写在body之前，那倒是可以说是就近原则，但如果写在后面，那就是最后覆盖原则。
所以根据以上两点，在标签出通过内联设置的样式优先级是最高的。 ```html我是什么颜色？
所以是绿色，并且如果没有green，则是黄色，因为黄色是**最后设置**的，所以会覆盖上面冲突的样式。<a name="WtQVo"></a>### 2.继承性<a name="aU1Kl"></a>#### 注意点不是所有的样式都会被继承的，主要**继承的是文字类型的样式**，而像**宽、高、边距这种属性是不会被继承**的。但是**对于块级元素**来说，其有默认宽度，宽度为父亲元素的宽度100%，所以必须设置的只有高度。<br />（哦所以这就是为什么我以前改父标签的宽高样式无法影响子标签的原因了。）<br /><br />使用倍数的行高，最大的优点就是子元素可以自动根据文字大小改变行高。<a name="UFrwb"></a>### 3.优先级<br /><br />对于最后一点 重要的 使用方式为，在需要提升优先级的样式属性后加上 !important 即可提升至最大优先级：```html<body><p class="row">我是什么颜色？</p></body><style>/* 根据优先级应该是.row优先，但是 p 选择器中的red加了!important变为最高优先级,所以最终是红色*/.row {color: yellow;}p {color: red !important;}</style>
注意点
根据第5点，我们就能解释为什么 a 标签无法通过继承修改样式，因为a标签是浏览器自动设置样式的，相当于写了一句 a{color:bule}，因为继承的权重小于元素选择器，所以无法通过继承覆盖原本的样式，只能通过直接重写a标签或者通过类、id选择器、行内style才能修改样式。
<body>
<a href="" class="change" id="a1">我变色了吗？</a>
</body>
<style>
a {
color: black;
}
.change {
color: pink;
}
#a1 {
color: purple;
}
</style>
根据权重，id选择器的优先级在上例中最高，所以最终a标签是紫色purple
若有收获，就点个赞吧
0 人点赞
