【目錄】
- css的三大特性
- 層疊性
- 特性說(shuō)明
- 原理
- DEMO
- 繼承性
- 優(yōu)缺點(diǎn)
- 重點(diǎn)
- DEMO
- html代碼
- css代碼
- 優(yōu)先級(jí)
- css特殊性（權(quán)重Specificity）
- 計(jì)算規(guī)則
- 總結(jié)
- DEMO
- 層疊性
層疊性
CSS(Cascading Style Sheets)又稱為層疊樣式表胸懈，所以這個(gè)第一個(gè)特性就是層疊性实昨。
要說(shuō)層疊性就要先明確一個(gè)定義：樣式?jīng)_突 膘滨。因?yàn)閷盈B性就是解決樣式?jīng)_突的問(wèn)題的锹安。
特性說(shuō)明
樣式?jīng)_突 是指一個(gè)標(biāo)簽指定了相同樣式同值的情況。一般情況器净，如果出現(xiàn)樣式?jīng)_突尖淘，會(huì)按照書(shū)寫(xiě)順序最后的為準(zhǔn) 。
原理
這種特性的原理與瀏覽器的渲染原理有關(guān):
一般打開(kāi)網(wǎng)頁(yè)倡勇，會(huì)先下載文檔內(nèi)容逞刷，加載頭部的樣式資源嘉涌，然后按照從上而下，自外而內(nèi)的順序渲染DOM內(nèi)容夸浅。
所以在運(yùn)行的過(guò)程中仑最，上面的樣式先執(zhí)行，下面的樣式元素會(huì)將上面的層疊掉 帆喇。
DEMO
下面看一個(gè)小例子：
一個(gè)div警医，在head標(biāo)簽里面添加這個(gè)樣式
<style>
div{
width: 300px;
height: 150px;
background-color: red;
background-color: blueviolet;
color:pink;
color:#fff;
font-size: 30px;
font-size: 20px;
text-align: center;
text-align: right;
}
div{
color:yellow;
}
</style>
然后會(huì)顯示什么呢？
可能到這里顯示的不是很明白坯钦，那么F12審查元素看一下：
結(jié)論 :無(wú)論在同一個(gè)div中還是不在同一個(gè)div中预皇，后面的樣式將前面的層疊掉了，所以這就是css的層疊性婉刀。
繼承性
所謂 繼承性 是指書(shū)寫(xiě)css樣式表時(shí)吟温，字標(biāo)簽會(huì)繼承父標(biāo)簽的某些樣式，有一些樣式是具有繼承性的突颊，想要設(shè)置一個(gè)可繼承的屬性鲁豪，只需將它應(yīng)用于父元素即可。
優(yōu)缺點(diǎn)
| 優(yōu)點(diǎn) | 缺點(diǎn) |
|---|---|
繼承可以簡(jiǎn)化代碼律秃，降低css樣式的復(fù)雜性爬橡。 |
如果在網(wǎng)頁(yè)中所有的元素都大量使用繼承樣式，那么判斷樣式的來(lái)源就會(huì)很困難友绝。 |
重點(diǎn)
并不是所有的css屬性都可以繼承堤尾，對(duì)于字體、文本屬性等網(wǎng)頁(yè)中通用的樣式可以使用繼承迁客。例如：字體郭宝、字號(hào)、顏色掷漱、行距等可以在body元素中統(tǒng)一設(shè)置粘室，然后通過(guò)繼承影響文檔中所有文本。而有一些屬性就不具有繼承性：邊框卜范、外邊距衔统、內(nèi)邊距、背景海雪、定位锦爵、元素高屬性。
| 可繼承的（字體奥裸、文本屬性等） | 不可繼承的 |
|---|---|
| 顏色险掀、font-開(kāi)頭、text-開(kāi)頭湾宙、line-開(kāi)頭的樟氢、white-space | 邊框冈绊、外邊距、內(nèi)邊距埠啃、背景死宣、定位、高度 |
| 浮動(dòng) |
下面來(lái)試驗(yàn)一下下碴开，第一行的來(lái)個(gè)大鍋燴看看：
DEMO
html代碼
<div class="father">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
<p>呵呵</p>
<span>嘻嘻</span>
<div class="son">嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿黑嘿嘿<p>哦~</p></div>
</div>
css代碼
.father{
width: 300px;
height: 200px;
font-size: 20px;
font-weight: 700;
text-align: right;
text-decoration: underline;
line-height: 20px;
background-color: green;
color:greenyellow;
margin: 5px;
padding: 5px;
position: relative;
}
.son{
width: 90%;
background-color: darkorange;
position: absolute;
bottom: 0;
left: 0;
color:#fff;
}
效果是什么呢毅该？
分析：
是不是很不明顯？用F12審查元素一下看看最里面的p元素潦牛，其中：
color屬性繼承自父親.son
font-size\font-weight\text-align\line-height\white-space繼承自.son的父親.father
可以看到下面繼承的元素顯示的顏色比較深鹃骂，沒(méi)有繼承的元素灰掉：
優(yōu)先級(jí)
定義css樣式時(shí)，經(jīng)常出現(xiàn)兩個(gè)或更多規(guī)則應(yīng)用在同一元素上罢绽，這時(shí)就會(huì)出現(xiàn)優(yōu)先級(jí)的問(wèn)題。
css特殊性（權(quán)重Specificity）
關(guān)于css權(quán)重静盅，我們需要一套計(jì)算公式去計(jì)算良价，這就是css特性。
| 元素 | 貢獻(xiàn)值 |
|---|---|
| 繼承蒿叠、* | 0明垢，0，0市咽，0 |
| 每個(gè)標(biāo)簽 | 0痊银，0，0施绎，1 |
| 類溯革、偽類 | 0，0谷醉，1致稀，0 |
| ID | 1，0俱尼，0抖单，0 |
| 行內(nèi)樣式 | 1，0遇八，0矛绘，0 |
| !important | 無(wú)窮大 |
| max-height、max-width覆蓋width刃永、height | 大于無(wú)窮大 |
| min-height货矮、min-width | 大于max-height、max-width |
計(jì)算規(guī)則
- 遇到有貢獻(xiàn)值的就進(jìn)行累加揽碘，例如：
div ul li ---> 0,0,0,3
.nav ul li ---> 0,0,1,2
a:hover ---> 0,0,1,1
.nav a ---> 0,0,1,1
#nav p ---> 0,1,0,1- 數(shù)位沒(méi)有進(jìn)位：
0,0,0,5+0,0,0,5 = 0,0,0,10而不是0,0,1,0次屠，所以不會(huì)存在10個(gè)div能趕上一個(gè)類選擇器的情況 园匹。- 權(quán)重不會(huì)繼承，所以父元素的權(quán)重再高也和子元素沒(méi)有關(guān)系
- 如果有
!important那么相加的那些無(wú)論多高就不管用劫灶，如果有max-height/max-width那么!important不管用裸违，如果同時(shí)有min-height/min-width和max-height/max-width，那么max-height/max-width的不管用本昏。
總結(jié)
min-height/min-width > max-height/max-width > !important > 行內(nèi)樣式 > ID選擇器 > 類選擇器供汛、屬性選擇器、偽元素和偽類選擇器 > 元素選擇器 > 通用選擇器
使用了涌穆！important聲明的規(guī)則怔昨；
內(nèi)嵌在HTML元素的style屬性里面的聲明；
使用了ID選擇器的規(guī)則
使用了類選擇器宿稀、屬性選擇器趁舀、偽元素和偽類選擇器的規(guī)則
使用過(guò)了元素選擇器的規(guī)則
只包含一個(gè)通用選擇器的規(guī)則
DEMO
- 給body指定樣式，a標(biāo)簽和h標(biāo)簽都不會(huì)改變
<!--css代碼-->
<style>
body{
font-size: 20px;
}
</style>
<!--html代碼-->
<body>
<div>正常文本</div>
<div>正常文本</div>
<div>正常文本</div>
<p>正常文本</p>
<p>正常文本</p>
<p>正常文本</p>
<p>正常文本</p>
<a href="#">連接文本</a>
<a href="#">連接文本</a>
<a href="#">連接文本</a>
<h1>標(biāo)題名稱</h1>
<h1>標(biāo)題名稱</h1>
<h1>標(biāo)題名稱</h1>
</body>
效果：
因?yàn)閍標(biāo)簽和h標(biāo)簽都是特殊的標(biāo)簽祝沸，都有自己的樣式矮烹，要想改變，就應(yīng)該在其元素中定義將元素的樣式層疊掉罩锐。
body{
font-size: 20px;
}
a{
color: #000;
text-decoration: none;
font-size: 20px;
}
h1{
font-size: 20px;
font-weight: 400;
}
效果：
-
面試題一：
面試寶典
- 先找到影響文字的最里面的盒子
- 然后計(jì)算權(quán)重
- 如果權(quán)重一樣奉狈，看層疊性
<div id="father" class="c1">
<p id="son" class="c2">
試問(wèn)這行文字是什么顏色？
</p>
</div>
<style type="text/css">
#father #son{ /*0,2,0,0*/
color:blue;
}
#father p.c2{ /*0,1,1,1*/
color:black;
}
div.c1 p.c2{ /*0,0,2,2*/
color:red;
}
#father{ /*0,0,0,0*/
color:green!important;
}
</style>
<!--字體顏色是藍(lán)色-->
- 面試題二：
<style type="text/css">
#father{ /*0,1,0,0*/
color:red;
}
p{ /*0,0,0,0*/
color:blue;
}
</style>
<div id="father">
<p>
字體顏色是什么涩惑？
</p>
</div>
<!--字體顏色是藍(lán)色-->
- 面試題三：（權(quán)重一樣仁期，層疊性就有用了）
<div id="box1" class="c1">
<div id="box2" class="c2">
<div id="box3" class="c3">
文字
</div>
</div>
</div>
<style type="text/css">
.c1 .c2 div{ /*0,0,2,1*/
color:blue;
}
div #box3{ /*0,1,0,1*/
color:green;
}
#box1 div{ /*0,1,0,1*/
color:yellow;
}
</style>
<!--字體顏色是黃色-->
- max-width覆蓋width
div{
width: 480px!important;
height: 300px;
background-color: blueviolet;
max-width: 200px;
}
<div></div>
- min-width覆蓋max-width，如果這兩個(gè)發(fā)生沖突竭恬，最大的比最小的還要小跛蛋，那么以哪個(gè)為準(zhǔn)？
div{
max-width: 300px!important;
height: 300px;
background-color: blueviolet;
min-width: 500px;
}
<div></div>
version1.0 —— 2018/5/15痊硕，首次創(chuàng)建CSS的三大特性總結(jié)
?burning_韻七七
