內聯樣式表(InLine style)>內部樣式表(Internal style sheet)>外部樣式表(External style sheet) 例外:但如果外部樣式表放在內部樣式表下邊引用,則外部樣式表>內部樣式表; 1,內聯樣式表權值為1000; 2,ID選擇器的權值為100; 3,Cla ...
內聯樣式表(InLine style)>內部樣式表(Internal style sheet)>外部樣式表(External style sheet)
例外:但如果外部樣式表放在內部樣式表下邊引用,則外部樣式表>內部樣式表;
1,內聯樣式表權值為1000;
2,ID選擇器的權值為100;
3,Class類選擇器的權值為10;
4,HTML標簽選擇器的權值為1;
具體代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS樣式權值</title> <style> body{ font-size: 20px; font-weight: 900; } h3{ color: yellow; } #redP p{ /*權值100+1=101*/ color: #f00; /*紅色*/ } #redP p.red em{ /*權值100+1+10+1=112*/ color: #00f; /*藍色*/ } #redP .red em{ /*權值100+10+1=111*/ color: #0ff; /*亮藍色*/ } #redP p span em{ /*權值100+1+1+1=103*/ color: #ff0; /*黃色*/ } </style> <link rel="stylesheet" href="style.css"> </head> <body> <h3>例外:外部樣式表>內部樣式表</h3> <div id="redP"> <p class="red"> <span> <em>emred</em> </span> </p> <p>red</p> </div> </body> </html>
