目录
一、CSS特性
1.1 层叠性
<style>
/* 层叠性 */
/*
特点：
① 给同一个标签设置不同的样式，样式叠加
② 給同一个标签设置相同的样式，样式覆盖
*/
</style>
1.2 继承性
<style>
/* 继承性：子元素有默认父元素样式的特点 */
/*
可以继承的属性：
（文字控制属性都可以继承）
color,font-style,...,text-indent,...,line-height
*/
/*
注意：行高的继承
当行高没有单位时，代表倍数
*/
body{
font:12px/1.5 Microsoft YaHei;
}
/* p继承body，14*1.5=21 */
p{
font-size: 14px;
}
/* div继承body，16*1.5=24 */
div{
font-size: 16px;
}
</style>
<body>
<p>哈哈</p>
<div>哈哈</div>
</body>
1.3 优先级
<style>
/* 优先级 */
/*
优先级与层叠性的区别：
当选择器相同 --> 层叠性
当选择器不同 --> 优先级
*/
/*
选择器权重表：
------------------------------------------------------
| 选择器 | 权重 |
|-----------------------------------------------------
| 继承 / * | 0，0，0，0 |
| 元素选择器 | 0，0，0，1 |
| 类选择器/伪类选择器 | 0，0，1，0 |
| ID选择器 | 0，1，0，0 |
| 行内样式style | 1，0，0，0 |
| !important | 无穷大 |
------------------------------------------------------
*/
div{
color: black!important;
}
.test{
color: red;
}
#demo{
color: blue;
}
</style>
<body>
<div class ="test" id="demo" style="color: green;">哈哈</div>
</body>
特殊情况：
<style>
body{
color: red;
}
</style>
<body>
<!-- a链接浏览器默认制定了：蓝色+下划线 -->
<a href="#">网址</a>
</body>
权值叠加
<style>
/*
权值
ul 0,0,0,1
li 0,0,0,1
总计 0,0,0,2
*/
ul li{
color: red;
}
/*
权值
.nav 0,0,1,0
li 0,0,0,1
总计 0,0,1,1
*/
.nav li{
color: green;
}
/*
权值
li 0,0,0,1
总计 0,0,0,1
*/
li{
color: blue;
}
</style>
<body>
<ul class="nav">
<li>文本</li>
<li>文本</li>
<li>文本</li>
<li>文本</li>
</ul>
</body>