【温故知新】CSS学习笔记（三大特性）
CSS三大特性簡介
?
CSS（層疊樣式表）三大特性：層疊性、繼承性、優(yōu)先級(jí)。
一、CSS層疊性
所謂的層疊性是指多種CSS樣式的疊加。是瀏覽器處理沖突的一個(gè)能力，如果一個(gè)屬性通過兩個(gè)相同選擇器設(shè)置到同一個(gè)元素上面，那么這時(shí)候一個(gè)屬性就會(huì)將另一個(gè)屬性層疊掉。
比如先給某個(gè)標(biāo)簽指定了內(nèi)部文字顏色會(huì)紅色，接著又指定了顏色為藍(lán)色，那么此時(shí)出現(xiàn)了一個(gè)標(biāo)簽指定了相同樣式的不同值的情況，這類情況我們就稱之為樣式?jīng)_突。
一般情況下，如果出現(xiàn)了樣式?jīng)_突，則會(huì)按照CSS書寫的順序，以最后的樣式為準(zhǔn)。
- 1、樣式?jīng)_突，遵循的原則就是就近原則，哪個(gè)樣式離著結(jié)構(gòu)近，就執(zhí)行哪個(gè)樣式；
- 2、樣式不沖突，則不會(huì)層疊；
?
【樣例代碼】
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>三大特性-層疊性</title><style>div {color: blue;font-size: 25px;}div {color: grey;}</style> </head> <body><div>三大特性-層疊性</div>?? </body> </html>?
二、CSS繼承性
所謂的繼承性是指書寫CSS樣式表的時(shí)候，子標(biāo)簽會(huì)繼承父標(biāo)簽的某些樣式（不是全部，一般來說是跟文字相關(guān)的屬性）。如文本顏色和字號(hào)，想要設(shè)置一個(gè)可繼承的屬性，只需要將它應(yīng)用于父元素即可。
- 恰當(dāng)?shù)氖褂美^承可以簡化代碼，降低CSS樣式的復(fù)雜性，子元素可以繼承父元素的樣式屬性有text-，font-，line-，color等這些元素。
?
【樣例代碼】
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>三大特性-繼承性</title><style>.baba {color: blue; font-size: 50px;}</style> </head><body><div class="baba"><p>三大特性-繼承性</p></div> </body> </html>?
三、CSS優(yōu)先級(jí)
定義CSS樣式的時(shí)候，經(jīng)常會(huì)出現(xiàn)兩個(gè)或者多個(gè)規(guī)則應(yīng)用在同一個(gè)元素上面的情況，這時(shí)就會(huì)出現(xiàn)優(yōu)先級(jí)的問題，這個(gè)時(shí)候會(huì)引出“權(quán)重”的概念。
- 繼承樣式的權(quán)重為0，即在嵌套結(jié)構(gòu)中，不管父元素樣式的權(quán)重有多大，被子元素繼承時(shí)，它的權(quán)重都是0，也就是說子元素定義的樣式會(huì)覆蓋繼承過來的樣式；
- 行內(nèi)樣式優(yōu)先，應(yīng)用style屬性的元素，其行內(nèi)樣式的權(quán)重非常高；
- 權(quán)重相同的時(shí)候，CSS遵循的就是上面說的就近原則，也就是說靠近元素的樣式具有最大的優(yōu)先級(jí)，或者說排在最后的樣式具有最大的優(yōu)先級(jí)；
- CSS中還定義了一個(gè)！important命令，該命令被賦予了最大的優(yōu)先級(jí)，也就是說不管權(quán)重如何以及樣式的位置遠(yuǎn)近，它的優(yōu)先級(jí)最大。
總結(jié)一下權(quán)重的知識(shí)點(diǎn)：
| 繼承或者*的權(quán)重 | 0,0,0,0 |
| 每個(gè)元素（標(biāo)簽）的權(quán)重 | 0,0,0,1 |
| 每個(gè)類/偽類的權(quán)重 | 0,0,1,0 |
| 每個(gè)ID的權(quán)重 | 0,1,0,0 |
| 每個(gè)行內(nèi)樣式的權(quán)重 | 1,0,0,0 |
| 每個(gè)！important的權(quán)重 | 無窮大（∞） |
?
【樣例代碼】
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>三大特性-優(yōu)先級(jí)</title><style>.baba { /* 權(quán)重 0,0,1,0 */color: blue; }div { /* 權(quán)重 0,0,0,1 */color: red;}#yeye { /* 權(quán)重 0,1,0,0 */color: pink;}div { /* 權(quán)重 ∞ */color: hotpink!important;}* { /* 權(quán)重 0,0,0,0 */color: grey;}/* 行內(nèi)權(quán)重 1,0,0,0 */</style> </head><body> <div class="baba" id="yeye" style="color: yellow">三大特性-優(yōu)先級(jí)</div> </body> </html>尤其需要注意的是，權(quá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ù)位之間沒有進(jìn)制，比如說：0,0,0,5+0,0,0,5 = 0,0,0,10（而不是0,0,1,0）；
再者需要特別注意的是：繼承的權(quán)重是0；
【樣例代碼】
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>繼承權(quán)重為0</title><style>.baba {color: blue!important;}p {color: red;}</style> </head> <body><div class="baba"><p>繼承的權(quán)重為0</p></div> </body> </html>?
?
總結(jié)
以上是生活随笔為你收集整理的【温故知新】CSS学习笔记（三大特性）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【温故知新】CSS学习笔记（行高简介）
- 下一篇： CSS 基本样式