Web前端入门（十六）CSS三大特性

总目录：https://blog.youkuaiyun.com/treesorshining/article/details/124725459

1.层叠性

• 相同选择器设置相同的样式，此时一个样式就会覆盖另一个冲突的样式。
• 层叠性主要解决样式冲突的问题
• 层叠性原则：
  • 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就按那个样式显示。

2.继承性

• CSS中的继承：子标签会继承父标签里面的某些样式，如文本颜色和字号等（text-，font-，line-这些元素开头的可以继承，以及color属性）
• 想要设置一个可继承的属性，只需将它应用于父元素即可

/* 行高继承的特殊情况，此处1.5表示子元素文字大小的1.5倍 */
font: 12px/1.5 'Microsoft YaHei'

3.优先级

• 当同一个元素指定多个选择器，就会有优先级的产生

<style>	
     div{
        color:pink;
     }
    
     .text {
     	color:red;
     }
</style>

<div class="text">test</div>

• 选择器相同，则执行层叠性
• 选择器不同，则按权重

标签选择器	计算权重公式
继承或者 *	0, 0, 0, 0
元素选择器（标签选择器）	0, 0, 0, 1
类选择器，伪类选择器	0, 0, 1, 0
ID选择器	0, 1, 0, 0
行内样式 style=“”	1, 0, 0, 0
!important 最重要的	无穷大

• 值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
• 关于CSS权重，需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）
• 等级判断是从左到右，如果某一位数值相同，则判断下一位数值
• 继承的权重是0
• 权重可以叠加，但是永远不会有进位

div ul li    ------>      0,0,0,3
.nav ul li   ------>      0,0,1,2
a:hover      -----—>      0,0,1,1
.nav a       ------>      0,0,1,1