共计 1330 个字符，预计需要花费 4 分钟才能阅读完成。
1、层叠性
雷同选择器给元素设置雷同的款式，此时一个款式会 笼罩（层叠）另一个抵触的款式。层叠性次要解决款式抵触问题。
<style>
div {
color: red;
font-size: 18px;
}
...
div {color: green; /* 和上方的红色抵触 */}
</style>最终文字色彩显示为绿色。层叠性遵循的准则是 就近准则，也就是哪个离构造近，哪个款式就会失效。（简略说后写的款式会笼罩后面写的）
在笼罩款式时，不抵触的属性不会被笼罩，比方下面的代码，最终 div 的字体大小仍为 18px。
2、继承性
在 CSS 中，子标签会继承父标签的某些款式，如文本色彩和字号。失当地应用继承能够简化代码，升高 CSS 款式的复杂性。
<style>
body {
font-size: 18px;
line-height: 24px;
}
div {font-size: 14px;}
</style>
<body>
<!-- div 继承了 body 的行高 -->
<div> 我的字体大小为 14px，行高为 24px </div>
<!-- p 继承了 body 的字号和行高 -->
<p> 我的字体大小为 18px，行高为 24px </p>
</body>子元素能够继承的款式：text-，font-，line- 结尾的属性，以及 color 属性
在继承性中，有一个特地的属性 —— line-height。
body {font: 12px/1.5 Microsoft YaHei;}
div {font-size: 16px;}
p {
font-size: 14px;
color: grey;
}行高能够设置为具体的值，比方 18px，也能够不跟单位，比方 1.5，意思是行高为字体大小的 1.5 倍。下面 body 的行高为 12 * 1.5 = 18px。
如果子元素没有设置行高，则会继承父元素的行高。下面代码中，<div> 的行高为 16 1.5 = 24px，<p> 的行高为 14 1.5 = 21px。
body 行高 1.5 这样的写法能够让子元素依据本人文字的大小调整行高。
3、优先级
| 选择器 | 选择器权重 |
|---|---|
| 继承 或者 * 通配符选择器 | 0,0,0,0 |
| 元素选择器 | 0,0,0,1 |
| 类选择器，伪类选择器 | 0,0,1,0 |
| ID 选择器 | 0,1,0,0 |
| 行内款式 style=”” | 1,0,0,0 |
| !important | ∞ 无穷大 |
留神：
- 权重由 4 组数字组成，然而不会有进位
- 等级判断从左向右比拟，如果某一位数值雷同，则判断下一位
继承的权重是 0，如果该元素没有被间接选中，不论父元素权重多高，子元素失去的权重都是 0
<style>
/* .top 是类选择器，权重 0,0,1,0 */
.top {color: red;}
/* p 是元素选择器，权重 0,0,0,1 */
p {color: yellow;}
</style>
<div class="top">
<p> 猜猜我是什么色彩？</p> <!-- 我是黄色哦 -->
</div>尽管 .top 的权重大于 p，但对 p 来说，.top 是继承自父元素的，其权重理论为 0,0,0,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
因为权重不会有进位，并且等级从左向右比拟，所以 0,0,0,12 的权重仍旧低于 0,0,1,0
正文完
