CSS 三大特性
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。