css三大特性

css三大特性

1. 层叠性：多种css样式叠加冲突时按就近原则执行。口诀：长江后浪推前浪，前浪死在沙滩上。
2. 继承性：（text-、font-、line-、color等这些元素可以有继承性）口诀：子承父业。
3. CSS优先级（重点）

（1）权重计算：

选择器相同就近原则；

选择器不同按权重执行；

!Important 声明权重最高（在座的都是辣鸡）

div { color: pink!Important；}

- 值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

- 关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）

 

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

（2）权重叠加

我们经常用交集选择器，后代选择器等，是有多个基础选择器组合而成，那么此时，就会出现权重叠加。

就是一个简单的加法计算：

- 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

注意：继承权重为0

   这个不难，但是忽略很容易绕晕。其实，我们修改样式，一定要看该标签有没有直接被选中。

① 如果选中了，那么以上面的公式来计权重。谁大听谁的。

② 如果没有选中，那么权重是0，因为继承的权重为0.

如下代码颜色最终显示为green知道为什么就理解了。

div {color: red;}

p {color: green;}/* 因为demo 没有选p标签，所以 继承的权重为 0 */

.demo {color: blue !important;}

#test {color: pink;}

<div class="demo" id="test">

<p>继承的权重为 0</p>

</div>