HTML5开发系列（6）之 CSS三大特性_html5的三个特性-优快云博客

本文深入探讨CSS的层叠性、样式的继承性及优先级规则，通过实例讲解如何解决样式冲突，理解哪些属性可以被子元素继承，并解析不同选择器的权重叠加效应。

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>

选择器权重的叠加效果：