HTML選擇器的權重(優先級)


選擇器的優先級主要用於樣式發生沖突的情況下
選擇器范圍越小,優先級越高
行內樣式>id選擇器>類選擇器>標簽選擇器>通用選擇器

這里涉及一個權重值的問題,權重值越高,優先級越大

權重值

HTML分別為每種類型選擇器分配了一個權值:
(1)通用選擇器
權重值:0
(2)標簽選擇器
權重值:1
(3)類選擇器
權重值:10
(4)ID選擇器
權重值:100
(5)行內樣式
權重值:1000

權重值的計算:

權值的計算很簡單,直接看代碼:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			a{color: yellow;}/*1*/
			div a{color: green;}/*1+1*/
			.demo a{color: black;}/*10+1*/
			#demo a{color: orange;}/*100+1*/
			div#demo a{color: red;}/*1+100+1*/
		</style>
	</head>
	<body>
		
		<a href="">this is 黃色</a>
		
		<div class="demo">
			<a href="">this is 黑色</a>
		</div>
		
		<div id="demo">
			<a href="">this is 紅色</a>
		</div>
	</body>
</html>

運行結果:

自己在編譯器敲敲就懂了


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM