css層疊性颓帝、繼承性、優(yōu)先級(jí)是必須掌握的窝革。
css層疊性
層疊性就是多種css樣式疊加
如果一個(gè)屬性通過(guò)兩個(gè)選擇器設(shè)置到同一個(gè)元素上购城，那么這時(shí)一個(gè)屬性就會(huì)將另一個(gè)屬性層疊掉。一般后寫的會(huì)覆蓋先寫的虐译。
層疊涉及到權(quán)重的問(wèn)題瘪板，權(quán)重高的就覆蓋權(quán)重低的。
div {
color: red;
}
div {
color: deepskyblue;
}
css繼承性
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<div>
<p>繼承性</p>
</div>
</body>
</html>
例子中菱蔬，p標(biāo)簽會(huì)繼承div的屬性篷帅。
不是所有的屬性都會(huì)繼承史侣，例如高度拴泌、margin、padding就不會(huì)繼承惊橱，text-蚪腐、font-、line- 這些元素開(kāi)頭的可以繼承税朴，以及color屬性會(huì)繼承回季。
css優(yōu)先級(jí)
css的優(yōu)先級(jí)涉及到權(quán)重。
優(yōu)先級(jí)就是分配給指定的CSS聲明的一個(gè)權(quán)重
當(dāng)同一個(gè)元素有多個(gè)聲明的時(shí)候正林，優(yōu)先級(jí)才會(huì)有意義泡一。因?yàn)槊恳粋€(gè)直接作用于元素的CSS規(guī)則總是會(huì)接管/覆蓋（take over）該元素從祖先元素繼承而來(lái)的規(guī)則。
繼承來(lái)的權(quán)重為0
權(quán)重用公式來(lái)算：
| 繼承或者*的貢獻(xiàn)值 | 0,0,0,0 |
|---|---|
| 每個(gè)元素（標(biāo)簽）貢獻(xiàn)值為 | 0,0,0,1 |
| 每個(gè)類觅廓、偽類貢獻(xiàn)值為 | 0,0,1,0 |
| 每個(gè)ID貢獻(xiàn)值為 | 0,1,0,0 |
| 每個(gè)行內(nèi)樣式貢獻(xiàn)值為 | 1,0,0,0 |
| 每個(gè) !important | 無(wú)窮大 |
!important一般不用鼻忠，由于 !important 改變了層疊正常工作的方式，因此調(diào)試CSS問(wèn)題杈绸，尤其是在大型樣式表中帖蔓，會(huì)變得非常困難矮瘟。
| 選擇器 | 千位 | 百位 | 十位 | 個(gè)位 | 合計(jì)值 |
|---|---|---|---|---|---|
h1 |
0 | 0 | 0 | 1 | 0001 |
.nav :first-child
|
0 | 0 | 1 | 0 | 0010 |
#indentifier |
0 | 1 | 0 | 0 | 0100 |
h1 + p::first-letter |
0 | 0 | 0 | 3 | 0003 |
li > a[href*="zh-CN"] > .inline-warning |
0 | 0 | 2 | 2 | 0022 |
| 沒(méi)有選擇器, 規(guī)則在行內(nèi)樣式里 | 1 | 0 | 0 | 0 | 1000 |
同級(jí)別的權(quán)重相加，而且沒(méi)有進(jìn)位的說(shuō)法塑娇。
li 0001
ul li 0002
nav ui li 0003
Examples:
* a=0 b=0 c=0 -> specificity = 0
LI a=0 b=0 c=1 -> specificity = 1
UL LI a=0 b=0 c=2 -> specificity = 2
UL OL+LI a=0 b=0 c=3 -> specificity = 3
H1 + *[REL=up] a=0 b=1 c=1 -> specificity = 11
UL OL LI.red a=0 b=1 c=3 -> specificity = 13
LI.red.level a=0 b=2 c=1 -> specificity = 21
#x34y a=1 b=0 c=0 -> specificity = 100
#s12:not(FOO) a=1 b=0 c=1 -> specificity = 101
下面這個(gè)選擇器是a的權(quán)重加上:hover的權(quán)重
a:hover 0011
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.nav { /*0,0,1,0,但是這是nav的權(quán)重澈侠，不是li的，li繼承了nav的埋酬，在這里哨啃，li本身的權(quán)重是0,0,0,1*/
color: red;
}
li { /*0,0,0,1 這個(gè)權(quán)重才是li的，而他是后寫的屬性写妥，所以棘催，這里 .nav 和 li 都是同樣的權(quán)重，但是 li會(huì)層疊掉 .nav的屬性*/
color: skyblue;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li>繼承的權(quán)重是0</li>
</ul>
</div>
</body>
</html>
示例1：
這個(gè)例子的最終答案是會(huì)顯示第一個(gè)選擇器的顏色
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#father #son { /*0,2,0,0*/
color: deepskyblue;
}
#father p.c2 { /*0,1,1,1*/
color: peachpuff;
}
div.c1 p.c2 { /*類選擇器權(quán)重低于id選擇器*/
color: aqua;
}
#father {
color: green !important;/*!important是他父級(jí)的權(quán)重耳标，他是繼承來(lái)的醇坝，為0*/
}
</style>
</head>
<body>
<div id="father" class="c1">
<p id="son" class="c2">這是什么顏色</p>
</div>
</body>
</html>
示例2：
這個(gè)例子#father是繼承來(lái)的屬性，權(quán)重和p是一樣的次坡，但是p是后寫的呼猪。
<style>
#father {
color: red;
}
p {
color: blue;
}
</style>
</head>
<body>
<div id="father">
<p >這是什么顏色</p>
</div>
示例3：
<style>
div p { /*0,0,0,2*/
color: red;
}
#father { /*繼承來(lái)的權(quán)重為0*/
color: aqua;
}
p.c2 { /*0,0,1,1*/
color: skyblue;
}
</style>
</head>
<body>
<div id="father" class="c1">
<p class="c2">這是什么顏色</p>
</div>
示例4：
<style>
div div { /*0,0,0,2*/
color: red;
}
div { /*0,0,0,1*/
color: skyblue;
}
</style>
</head>
示例5：
<style>
div div div div div div div div div div {/*0,0,0,10*/
color: red;
}
.me {/*0,0,1,0*/
color: blue;
}
</style>
</head>
<body>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div class="me">這是什么顏色</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
示例6：
<style>
.c1 .c2 div {/*0,0,2,1*/
color: blue;
}
div #box3 {/*0,1,0,1*/
color: green;
}
#box1 div {/*0,1,0,1 和上面權(quán)重相同，就近原則*/
color: orange;
}
</style>
</head>
<body>
<div id="box1" class="c1">
<div id="box2" class="c2">
<div id="box3" class="c3">這是什么顏色</div>
</div>
</div>
