CSS的三大特性是什么

這篇文章主要介紹“CSS的三大特性是什么”，在日常操作中，相信很多人在CSS的三大特性是什么問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”CSS的三大特性是什么”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

層疊 繼承 優(yōu)先級(jí) 是我們學(xué)習(xí)CSS 必須掌握的三個(gè)特性。

所謂層疊性是指多種CSS樣式的疊加。

是瀏覽器處理沖突的一個(gè)能力,如果一個(gè)屬性通過(guò)兩個(gè)相同選擇器設(shè)置到同一個(gè)元素上，那么這個(gè)時(shí)候一個(gè)屬性就會(huì)將另一個(gè)屬性層疊掉。

比如先給某個(gè)標(biāo)簽指定了內(nèi)部文字顏色為紅色，接著又指定了顏色為藍(lán)色，此時(shí)出現(xiàn)一個(gè)標(biāo)簽指定了相同樣式不同值的情況，這就是樣式?jīng)_突。

一般情況下，如果出現(xiàn)樣式?jīng)_突，則會(huì)按照CSS書(shū)寫(xiě)的順序，以最后的樣式為準(zhǔn)。

所謂繼承性是指書(shū)寫(xiě)CSS樣式表時(shí)，子標(biāo)簽會(huì)繼承父標(biāo)簽的某些樣式，如文本顏色和字號(hào)。想要設(shè)置一個(gè)可繼承的屬性，只需將它應(yīng)用于父元素即可。

簡(jiǎn)單的理解就是： 子承父業(yè)。

注意：

恰當(dāng)?shù)厥褂美^承可以簡(jiǎn)化代碼，降低CSS樣式的復(fù)雜性。子元素可以繼承父元素的樣式（text-，font-，line-這些元素開(kāi)頭的都可以繼承，以及color屬性）

定義CSS樣式時(shí)，經(jīng)常出現(xiàn)兩個(gè)或更多規(guī)則應(yīng)用在同一元素上，這時(shí)就會(huì)出現(xiàn)優(yōu)先級(jí)的問(wèn)題。

在考慮權(quán)重時(shí)，初學(xué)者還需要注意一些特殊的情況，具體如下：

關(guān)于CSS權(quán)重，我們需要一套計(jì)算公式來(lái)去計(jì)算，這個(gè)就是 CSS Specificity，我們稱(chēng)為CSS 特性或稱(chēng)非凡性，它是一個(gè)衡量CSS值優(yōu)先級(jí)的一個(gè)標(biāo)準(zhǔn) 具體規(guī)范入如下：

specificity用一個(gè)四位的數(shù) 字串(CSS2是三位)來(lái)表示，更像四個(gè)級(jí)別，值從左到右，左面的最大，一級(jí)大于一級(jí)，數(shù)位之間沒(méi)有進(jìn)制，級(jí)別之間不可超越。

繼承或者* 的貢獻(xiàn)值 0,0,0,0

每個(gè)元素（標(biāo)簽）貢獻(xiàn)值為 0,0,0,1

每個(gè)類(lèi)，偽類(lèi)貢獻(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貢獻(xiàn)值∞ 無(wú)窮大

權(quán)重是可以疊加的

比如：

注意：

1.數(shù)位之間沒(méi)有進(jìn)制 比如說(shuō)： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不會(huì)存在10個(gè)div能趕上一個(gè)類(lèi)選擇器的情況。

2.繼承的 權(quán)重是 0

總結(jié)優(yōu)先級(jí)：

使用了 !important聲明的規(guī)則。

內(nèi)嵌在 HTML 元素的 style屬性里面的聲明。

使用了 ID 選擇器的規(guī)則。

使用了類(lèi)選擇器、屬性選擇器、偽元素和偽類(lèi)選擇器的規(guī)則。

使用了元素選擇器的規(guī)則。

只包含一個(gè)通用選擇器的規(guī)則。

同一類(lèi)選擇器則遵循就近原則。

綜上：權(quán)重是優(yōu)先級(jí)的算法，層疊是優(yōu)先級(jí)的表現(xiàn)

到此，關(guān)于“CSS的三大特性是什么”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！