前言

本文基于尚硅谷Web前端基础教程发布，你也可以理解成这是一篇尚硅谷教程笔记，当然这里也有我的一些经验总结

这里先把样式等优先级列出来方便记忆和查看理解

理解

内联样式是网页中最高的优先级但是我们也最好不要使用内联样式因为内联样式是不如内部样式和外部样式好用的，其一是因为网页内容多了想要定义多个样式就得一行一行写内联很麻烦，其二就是它级别太高了，你如果想要在内联的基础上修改某一部分样式就会因为内联的级别太高而无法正常生效

对比一下：可以复制下来自己对比

<p style="color:red">LineXic!!!</p>
<!-- 这是内联样式 -->

/* 这是内部样式 */
<p>LineXic!!!</p>

<style>
p{ 
  color: blue;
}
</style>

两种都定义了文段LineXic！！！的颜色，与之不同的是高优先级的「内联样式」定义的是红色而「内部样式」则是蓝色思考一下，字段会变成蓝色还是红色的？这就是优先级的好处–比别人更快显示样式并覆盖

* 称为通配选择器可以是全文的文段标签都应用上这种效果，h1标签也好，p标签也好全部定义成一个样子的可以任意支配任何选择器。听上去功能强大，但是不推荐使用

在继承中，虽然子标签继承了父标签的属性但不继承它的权重(类似于地位)

比较优先级时，可以将所有的优先级相加计算，优先级越高则优先显示这个和理解一段说的差不多

但他们之间是不会相互「越界」的，比如ID选择器相加在高也是不会超过内联样式的选择器的

在外联样式中用!important规则大概是这样的

p {
  background-color: red !important;
}

和通配选择器不同的是，它只在特定的标签内生效有一种限制即上文的p{...}

!important也是一种坏习惯，应当尽量避免，当不考虑其他优先性时也是可以用它的

阅读量:

☛兄dei，请我喝杯茶☚