CSS样式优先级解析-优快云博客

本文链接：https://blog.youkuaiyun.com/cigarangle/article/details/26284509

1.同种选择器，同时控制一种tag时（在样式表内，后者会覆盖前者）

<DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
		<style type="text/css">
			div p{ width: 100px;height:100px;background:red;}
			div p{ background:blue;}
		</style>
	</head>
	<body>
		<div><p>我被样式表内的第二个div p控制</p></div>
		
	</body>
</html>

2.class选择器和标签选择器同时控制一种tag时（class>tag）

<DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
		<style type="text/css">
			.box p{width:400px;height:100px;background:red;}
			div p{background:blue; border:solid 3px black;}
		</style>
	</head>
	<body>
		<div class="box">
			<p>在.box p和div p两个选择器中：1.如果有被控制的相同属性，我优先使用.box p的属性。2.再使用div p中，没被.box p控制的属性。</p>
		</div>
	</body>
</html>

3.ID选择器和 class选择器同时控制一种tag的时候（id>class）

<DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
		<style type="text/css">
			#box1{width:400px;height: 100px;background: red;}
			.box{background: blue; border: solid 3px black;}
		</style>
	</head>
	<body>
			<div class="box" id="box1">
				在#box1和.box两个选择器中，1.如果有被控制的相同属性，我优先使用#box1的属性。2.再使用.box中，没被#box1控制的属性。
			</div>
	</body>
</html>

4.行间样式表和 ID选择器同时控制一种tag的时候（行间样式表>id）

<DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
		<style type="text/css">
			#box1{width:400px;height: 100px;background: red; border: solid 3px black;}
		</style>
	</head>
	<body>
			<div id="box1" style="background:blue;">
				在行间样式表和#box1两个选择器中，1.如果有被控制的相同属性，我优先使用行间样式表的属性。2.再使用#box1中，没被行间样式表控制的属性。
			</div>
	</body>
</html>

02_04.选择器优先级