CSS——三大特性

CSS三大特性：层叠性、继承性、优先级

---

一、层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。这就涉及到CSS的另一个特性：优先级。

优先级相同的情况下，由于代码从上到下执行，后面的样式就会覆盖前面的样式。

CSS 层叠性口诀：长江后浪推前浪，前浪死在沙滩上😀。

---

二、继承性

具有继承性的属性：

① 字体系列：font-xxxx;

② 部分文本：缩进、水平对齐、行高、间距、颜色；

③ 可见性：visibility；

④ 列表布局：list-style；

⑤ 光标：cursor。

无继承性的属性：

① display；

② 部分文本：text-decoration、文本阴影、文本方向；

③ 盒子模型：margin、padding、border、width、height；

④ 定位：position、float、clear、top、bottom......；

⑤ 背景：background；

⑥ 生成内容：content；

⑦ 轮廓样式：outline；

⑧ 页面样式；

⑨ 声音样式。

无继承性的属性可以通过显示继承使其具有继承性

*{
    属性：inherit；
}

---

三、优先级

对于复合选择器而言，会存在权重叠加的问题。

继承	0，0，0，0
元素	0，0，0，1
类/伪类	0，0，1，0
ID	0，1，0，0
行内	1，0，0，0
！important	+∞

复合选择器比较优先级时，先叠加权重再比较。为了便于理解，可以将权重看成十进制的数字，再进行小学级别的口算加法运算。

例如：

<div class="c1" id="c2"></div>

/*权重为 1+100=101*/
div #c2{
    background-color:pink;
}

/*权重为 1+10=11*/
div .c1{
    background-color:green;
}

/*权重为 100*/
#c2{
    background-color:yellow;
}

/*权重为 1*/
div{
    width:100px;
    height:100px;
    background-color:blue;
}

/*权重最大的是101，所以最终块的颜色是粉色*/