CSS樣式覆蓋
1.根據(jù)引用方式確定優(yōu)先級(jí)
- 外部鏈接
- 寫在style標(biāo)簽里
- 內(nèi)聯(lián)屬性
以上三種方式引入的css，優(yōu)先級(jí)依次提高,優(yōu)先級(jí)高的覆蓋優(yōu)先級(jí)低的。
2.后寫覆蓋先寫
在同一個(gè)級(jí)別里，后寫的覆蓋先寫的。
//這是寫在外部文件style.css里的
h1 {
color: #ffffff;
}
h1 {
color: #dddadd;
}
//這是寫在html里的
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>我的顏色到底是啥？</h1>
</body>
在這里h1的顏色的是#dddadd
3.選擇器優(yōu)先級(jí)
在選擇器不同的情況下，我們給每種選擇器制定一個(gè)權(quán)值，計(jì)算命中一個(gè)元素的所有選擇器的總權(quán)值，值高者獲勝.
- 元素選擇器： 1
- 類選擇起器： 10
- ID選擇器： 100
- 內(nèi)聯(lián)選擇器： 1000
#nav .current a{ }
該選擇器的權(quán)值為100 + 10 + 1 = 111
//html部分
<section id="content">
<p class="abstract">這里是Abstract</p>
<p>這里是普通的</p>
</section>
//CSS部分
#content p {
color: red
}
.abstract {
color: black;
}
p的color屬性是:red
因?yàn)?code>#content p是ID選擇器和元素選擇器 權(quán)值101=100+1， .abstract是類選擇器 權(quán)值為10，所以p的color屬性是red.
4.important
在任何情況下，只要在樣式上加了important，則他優(yōu)先級(jí)最高，前面所有的規(guī)則都忽略 。
本文內(nèi)容參考www.codefordream.com
