1.层叠性
当同一个标签定义了多个样式的时候,就存在样式属性冲突,样式属性相同则被覆盖;
当css样式冲突的时候会执行后定义的样式,如果样式属性不冲突则分开执行;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
color: red;
font-size: 20px;
}
div{
color: blue;
}
/*这里就存在多样式属性冲突问题,最后会显示blue,和font-size这个两个;*/
</style>
</head>
<body>
<div>我是于给div</div>
</body>
</html>
2.样式的继承性
当给父类设置相关的属性后,子标签会继承父类的这些属性显示出来,但是不是所有的属性样式都是可以继承的;
可以继承的属性有 :text- 、 font- 、line- 开头的,以及color属性;
3.css的优先级
一个标签元素,可能会有多个选择器,但是谁会是最终的执行效果呢?这里就涉及到了选择器的优先级了;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*0001*/
li{
color: red;
}
/*0010>0002...0003*/
.li1{
color: orange;
}
/*0001+0001=0002*/
ul li{
color: blue;
}
</style>
</head>
<body>
<nav >
<ul >
<li class="li1">李白</li>
<li class="li1">李白</li>
<li class="li1">李白</li>
<li class="li1">李白</li>
</ul>
</nav>
</body>
</html>
选择器权重的叠加效果:
ps:继承的权重为0;