CSS（层叠样式表）具有三大特性，即层叠性、优先级和继承性。这些特性共同决定了CSS规则如何应用于HTML元素以及如何相互影响。
1.层叠性
层叠性主要为了解决样式冲突的问题。
CSS 规则的顺序很重要。当应用两条同级别的规则到一个元素上的时候，写在后面的就是实际使用的规则。
例如：
p{
color:red;
}
p{
color:blue;
}
<p>The</p>
这两个规则的来源相同，且具有相同的元素选择器，有相同的优先级，所以顺序在最后的生效。
2.优先级
浏览器是根据优先级来决定当多个规则有不同选择器对应相同的元素的时候需要使用哪个规则。
样式的来源不同，有浏览器默认样式、外部样式表、内部样式表和内联样式。
这些来源具有不同的优先级，内联样式的优先级最高，其次是内部样式表和外部样式表，浏览器默认样式的优先级最低。
一般情况下，
!important>内联选择器>ID选择器>类选择器>标签选择器>浏览器默认样式
但在实际情况中，需要根据具体情况来确定最终应用的样式。
!important
虽然!important的优先级最高，但通常不建议滥用它，因为它可能导致样式表变得混乱并且难以维护。
使用!important可能会掩盖样式冲突的根本问题，使得调试和修改样式变得更加困难。
在实际开发中，应该尽量避免使用!important，而是采用更好的样式组织和结构， 例如通过更具体的选择器、更好的层叠顺序、合理的样式分离等方式来管理样式。
这样可以确保样式的可维护性和可扩展性，使代码更加清晰易懂。
计算权重
如果没有!important的情况下，可以通过计算权重来决定CSS选择器的优先级。
例如，优先级可以通过（ABCD）来计算。
A表示内联样式的优先级，如果存在内联样式，则A等于1000，如果不存在，则A为0。
B表示ID选择器的优先级，如果存在一个ID选择器，则B等于100，如果不存在，则B为0。
C表示类选择器的优先级，如果存在一个类选择器，则C等于10，如果不存在，则C为0。
D表示标签选择器的优先级，如果存在一个标签选择器，则D等于1，如果不存在，则D为0。
最后，可以通过相加的操作来计算选择器优先级。
例如，如果存在一个 ID 选择器和两个类选择器，则计算出的优先级为 100 + 10 * 2 = 120。
3.继承性
CSS 中的继承性指的是某些属性值可以从父元素上继承到后代元素上的特性。
具体来说，当父元素应用了某些样式规则时，这些样式规则中的部分属性值会自动应用到其后代元素上，而无需自行在后代元素上进行定义。
继承性的优点是可以简化代码，降低样式的复杂性，但如果在网页中大量去使用继承的样式，那么判断样式的来源就会变得十分困难。
可以继承的属性
- 颜色，例如
color
- 字体相关属性，例如
font-family
font-size
font-weight
- 文本相关属性，例如
text-align
text-indent
line-height
text-decoration
text-transform
- 列表相关属性
list-style-type
list-style-image
list-style-position
4.总结
理解这三大特性，能够帮助我们更精准地进行样式的调整和布局，避免不必要的混乱和冲突，从而为用户提供更加舒适和愉悦的浏览体验。
我们可以动手编写代码来实践一下，尝试修改样式表中的属性值，观察其对最终页面的影响，进一步加深对这三大特性的理解。
