CSS三大特性概览：
- CSS层叠性
- CSS继承性
- CSS优先级
- CSS特殊性
CSS三大特性
CSS层叠性
- 所谓层叠性是指各种CSS样式的叠加。
- 一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。
示例如下：
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /* 一下两个样式中 color 冲突了，按照CSS的书写顺序，会执行最后 一个 div 中的全部特性*/ div { color: royalblue; } div { color: salmon; font: 700 14px; } </style> </head> <body> <div> <div class="rgba"></div> </div> <br/><br/> <div> CSS层叠性 </div> </body> </html>
页面效果如下:
CSS继承性
- 所谓继承性就是指书写CSS样式表时，子标签 会继承 父标签 的 某些样式；
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /* CSS继承性：对于p 标签中的文字并未设置样式时，会继承div中的某些特性，一般多是与文字相关的才会继承。 */ div { color: rgb(112, 17, 236); font: 700 14px; } </style> </head> <body> <div> <div class="rgba"></div> </div> <br/><br/> <div> <p>CSS继承性</p> </div> </body> </html>
页面效果如下：
CSS优先级
- 定义CSS样式时，经常会出现两个或多个规则应用在同一元素上，这是就会出现优先级的问题，也就是我们所说的权重；
- 关于CSS权重，可以用一套公式进行计算，这个就是CSS specificity，我们称为CSS特性或非凡性；
权重大小：
- 标签选择器 < 类选择器 = 伪类选择器 < id选择器 < 行内样式（直接在标签中书写style属性）< !important；
- 当权重相同时，遵循就近原则。
- 继承权重为0。