<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>三大特性</title>
<style>
/* css有三个非常重要的三个特性：层叠性，继承性，优先级 */
/* 3.1.1css层叠性 */
/* 相同选择器给设置相同的样式会造成冲突，层叠行就是为了解决样式冲突的问题
原则1.样式冲突：遵循就近原则
2.样式不冲突，不层叠 */
h5 {
color: red;
font-size: 2em;
}
h5 {
color: blue;
}
/* 3.1.2css继承性 */
/* css中的继承形：子标签继承了父亲的特性如：文字颜色和字号 */
/* 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承） */
div {
color: brown;
font-size: 2em;
}
/* 3.1.3行高的继承 */
body {
color: green;
font: 12px/24px'Microsoft Yahei';
}
/* 3.1.3优先级 */
/* 1.选择器相同，则根据选择器权重
继承 或者* 选择器 <元素选择器<类选择器和伪类选择器<ID选择器<行内样式style=""< !inportant这个是最大的*/
div {
color: blue;
}
.test {
color: blueviolet;
}
:test {
color: blueviolet;
}
#demo {
color: brown;
}
/* 注意点1.权重是有4组数字组成，但是不会进位。
2.可以理解为一级比一级大
3.等级判断从左向右，如果某一位数值相同，则判断下一位数值 */
/* 3.1.4css的权重叠加 */
ulli {
/* 权重是不是0001加上了一个0001 */
color: chartreuse;
}
li {
/* 这个的权重是不是还是0001 */
color: cyan;
}
.navli {
color: blue;
}
</style>
</head>
<body>
<h5>哈哈哈</h5>
<div>
<p>哈哈啊哈</p>
<divclass="text"id="demo"style="color: black;">haha</div>
</div>
<ulclass="nav">
<li>哈哈哈</li>
</ul>
</body>
</html>
