1.1
三大特性：层叠性、继承性、优先级
1.1.1层叠性
相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突问题。
div{
color:red;
font-size:20px;
}
div{
color:pink;
}
<div>长江后浪推前浪，前浪死在沙滩上</div>
在这里会显示的颜色为pink，字体大小为20px。
- 就近原则
- 样式不冲突不会层叠
1.1.2继承性
子标签会继承父标签的某些样式
div{
color:red;
font-size:20px;
}
<div>
<p>长江后浪推前浪，前浪死在沙滩上</p>
</div>
在这里p标签会显示红字，20px。
- 恰当使用可以简化代码
- 子元素可以继承父元素的样式（text-,font-,line-这些元素开头的可以继承以及color属性）
行高的继承
div{
color:red;
/* 12px是字体大小，24px是行高 */
font:12px/24px 'Microsoft YaHei';
}
body{
color:red;
/* 12px是字体大小，24px是行高
font:12px/24px 'Microsoft YaHei'; */
font:12px/24px 'Microsoft YaHei';
}
div{
/* 子元素继承了父元素body的行高1.5
这个1.5就是当前元素大小font-size的1.5倍 所以当前div的行高就是21px */
font:12px;
}
p{
/* 1.5*16=当前行高 */
font-size:16px;
}
<body>
<div>长江后浪推前浪，前浪死在沙滩上</div>
<p>长江后浪推前浪，前浪死在沙滩上</p>
</body>
1.1.3优先级
当同一个元素指定多个选择器，就会有优先级的产生
- 选择器相同，则执行层叠性
- 选择器不同，则根据选择器权重执行
| 选择器 | 选择器权重 |
|---|---|
| 继承或者* | 0.0.0.0 |
| 元素选择器 (div) | 0.0.0.1 |
| 类选择器，伪类选择器 (.test)（：hover） | 0.0.1.0 |
| id选择器 (#demo) | 0.1.0.0 |
| 行内样式 style=" " | 1.0.0.0 |
| important 重要的 | 无穷大 |
- 继承的权重为0，无论父类权重多高，子类得到的权重都是0
#div{
color:red;
}
p{
color:#fff;
}
<div>
<p>长江后浪推前浪，前浪死在沙滩上</p>
</div>
p为白色因为继承权重为0，无论父类是什么权重都不继承。
body{
color:red;
}
<body>
<!-- 显示为蓝色，因为浏览器默认给a标签设置了一个蓝色的 有下划线的样式 -->
<a href="#">我是一个单独样式</a>
</body>
所以如果要给a设置样式就要单独设置一个a的样式。
- 权重的叠加
/* 复合选择器会有权重叠加的问题 */
/* ul li的权重为0,0,0,1+0,0,0,1=0,0,0,2 */
ul li{
color:green;
}
/* li的权重是0，0，0，1 */
li{
color:red;
}
/* .nav li的权重为0,0,1,0+0,0,0,1=0,0,1,1 */
.nav li {
color:blue;
}
<ul class="nav">
<li>大猪蹄子</li>
<li>大肘子</li>
<li>猪尾巴</li>
</ul>
这里显示的为蓝色，因为权重大。
- 权重练习
/* .nav li的权重为0,0,1,0+0,0,0,1=0,0,1,1 11*/
.nav li {
color:blue;
}
/* .pink的权重为10 .nav .pink 的权重为20 */
.nav .pink{
color:red;
}
<ul class="nav">
<li class="pink">大猪蹄子</li>
<li>大肘子</li>
<li>猪尾巴</li>
</ul>
最终大猪蹄子的颜色为红色，大肘子和猪尾巴为蓝色。
