CSS在HTML中共三种使用方式：
- 行内样式
- 内嵌样式
- 外部样式
详见 CSS在HTML中的使用
CSS选择器最常用的也是三种：
- id选择器 #id值
- 类选择器 .class名
- 标签选择器 p标签名
倘若三种使用方式或三种选择器同时给P标签添加了不同的颜色样式，那最终究竟显示哪种样式呢？
- 使用方式相同时，样式权重为 id选择器 > 类选择器 > 标签选择器
- 选择器相同时，样式权重为 内嵌样式 > 外部样式
首先比较样式权重，样式权重高的样式会覆盖样式权重低的样式，最终显示权重最高的样式。
当样式权重相同时，写在后面的样式会覆盖写在前面的样式，最终显示写在最后的样式！
最终样式的确定流程
- 筛选出选中该元素的样式
- 在选中该元素的样式中，是否存在带 !important 后缀的样式，若存在，则会显示该样式，若没有，继续下一步
- 是否存在行内样式，若存在，则会显示行内样式，若没有，继续下一步
- 数一下样式选择器上一共有多少个id选择器，id选择器最多的权重最高，将显示该选择器里的样式，若id选择器数量相同，继续下一步
- 数一下样式选择器上一共有多少个类选择器（含属性选择器，伪类选择器），类选择器最多的权重最高，将显示该选择器里的样式，若类选择器数量相同，继续下一步
- 数一下样式选择器上一共有多少个标签选择器（含伪元素选择器），标签选择器最多的权重最高，将显示该选择器里的样式，若标签选择器数量相同，则显示写在最后的样式
CSS样式定义建议
统一使用外部样式，避免使用!important和id选择器，对指定标签有统一的指定样式时，才使用标签选择器。
CSS样式层叠自测题