1.1
三大特性：層疊性、繼承性、優(yōu)先級
1.1.1層疊性
相同選擇器給設(shè)置相同的樣式，此時一個樣式就會覆蓋（層疊）另一個沖突的樣式。層疊性主要解決樣式?jīng)_突問題。
div{
color:red;
font-size:20px;
}
div{
color:pink;
}
<div>長江后浪推前浪，前浪死在沙灘上</div>
在這里會顯示的顏色為pink，字體大小為20px。
- 就近原則
- 樣式不沖突不會層疊
1.1.2繼承性
子標簽會繼承父標簽的某些樣式
div{
color:red;
font-size:20px;
}
<div>
<p>長江后浪推前浪，前浪死在沙灘上</p>
</div>
在這里p標簽會顯示紅字，20px。
- 恰當使用可以簡化代碼
- 子元素可以繼承父元素的樣式（text-,font-,line-這些元素開頭的可以繼承以及color屬性）
行高的繼承
div{
color:red;
/* 12px是字體大小，24px是行高 */
font:12px/24px 'Microsoft YaHei';
}
body{
color:red;
/* 12px是字體大小，24px是行高
font:12px/24px 'Microsoft YaHei'; */
font:12px/24px 'Microsoft YaHei';
}
div{
/* 子元素繼承了父元素body的行高1.5
這個1.5就是當前元素大小font-size的1.5倍 所以當前div的行高就是21px */
font:12px;
}
p{
/* 1.5*16=當前行高 */
font-size:16px;
}
<body>
<div>長江后浪推前浪，前浪死在沙灘上</div>
<p>長江后浪推前浪，前浪死在沙灘上</p>
</body>
1.1.3優(yōu)先級
當同一個元素指定多個選擇器，就會有優(yōu)先級的產(chǎn)生
- 選擇器相同，則執(zhí)行層疊性
- 選擇器不同，則根據(jù)選擇器權(quán)重執(zhí)行
| 選擇器 | 選擇器權(quán)重 |
|---|---|
| 繼承或者* | 0.0.0.0 |
| 元素選擇器 (div) | 0.0.0.1 |
| 類選擇器，偽類選擇器 (.test)（：hover） | 0.0.1.0 |
| id選擇器 (#demo) | 0.1.0.0 |
| 行內(nèi)樣式 style=" " | 1.0.0.0 |
| important 重要的 | 無窮大 |
- 繼承的權(quán)重為0，無論父類權(quán)重多高，子類得到的權(quán)重都是0
#div{
color:red;
}
p{
color:#fff;
}
<div>
<p>長江后浪推前浪，前浪死在沙灘上</p>
</div>
p為白色因為繼承權(quán)重為0，無論父類是什么權(quán)重都不繼承。
body{
color:red;
}
<body>
<!-- 顯示為藍色，因為瀏覽器默認給a標簽設(shè)置了一個藍色的 有下劃線的樣式 -->
<a href="#">我是一個單獨樣式</a>
</body>
所以如果要給a設(shè)置樣式就要單獨設(shè)置一個a的樣式。
- 權(quán)重的疊加
/* 復(fù)合選擇器會有權(quán)重疊加的問題 */
/* ul li的權(quán)重為0,0,0,1+0,0,0,1=0,0,0,2 */
ul li{
color:green;
}
/* li的權(quán)重是0，0，0，1 */
li{
color:red;
}
/* .nav li的權(quán)重為0,0,1,0+0,0,0,1=0,0,1,1 */
.nav li {
color:blue;
}
<ul class="nav">
<li>大豬蹄子</li>
<li>大肘子</li>
<li>豬尾巴</li>
</ul>
這里顯示的為藍色，因為權(quán)重大。
- 權(quán)重練習(xí)
/* .nav li的權(quán)重為0,0,1,0+0,0,0,1=0,0,1,1 11*/
.nav li {
color:blue;
}
/* .pink的權(quán)重為10 .nav .pink 的權(quán)重為20 */
.nav .pink{
color:red;
}
<ul class="nav">
<li class="pink">大豬蹄子</li>
<li>大肘子</li>
<li>豬尾巴</li>
</ul>
最終大豬蹄子的顏色為紅色，大肘子和豬尾巴為藍色。
