02_04.選擇器優先級

原創

2020-02-22 04:29

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>