CSS 基本チュートリアルの優(yōu)先順位
CSSの優(yōu)先順位
単一セレクターの優(yōu)先順位
インラインスタイルIDセレクター>クラスタグセレクター
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>php.cn</title> <style type="text/css"> h1{ color:green; } .hclass{ color:bule; } #hid{ color:black; } </style> </head> <body> <div> <h1 class="hclass" id="hid" style="color:red">習(xí)近平心中的互聯(lián)網(wǎng)</h1> </div> </body> </html>
firebug を使用して観察します:
複數(shù)のセレクターの優(yōu)先度は、一般的に、ポインティングが正確であるほど優(yōu)先度が高くなります。
- 優(yōu)先度 10 のクラスセレクター
- 優(yōu)先度 100 の ID セレクター
- 業(yè)界ではスタイル優(yōu)先度は 100 0
次の優(yōu)先度を計算します
.title{color:blue;} 優(yōu)先度: 10
div.news h1{color: red;} 優(yōu)先度: 1 + 10 + 1 = 12h1.title{color:blue;} 優(yōu)先度: 1 + 10 = 11