CSS中層疊與繼承的使用方法

發(fā)布時間：2021-08-07 16:47:19 來源：億速云閱讀：97 作者：chen 欄目：web開發(fā)

本篇內(nèi)容介紹了“CSS中層疊與繼承的使用方法”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

CSS技術(shù)理論：CSS層疊與繼承

一、CSS層疊

我們知道文檔中的一個元素可能同時被多個CSS選擇器選中，每個選擇器都有一些CSS規(guī)則，這就是CSS層疊。這些規(guī)則有可能不矛盾的，自然這些規(guī)則將會同時起效，然而有些規(guī)則是相互沖突的，例如：

Example Source Code

<html xmlns="http://www.w3.org/1999/xhtml"> <head>     <title>CSS Cascadetitle>     <style type="text/CSS">     h2{color:Red;}      body h2{color:Blue;}      style> head> <body> <h2>Hello 52CSS.comh2> body> html>

為此需要為每條規(guī)則制定特殊性，當(dāng)發(fā)生沖突的時候必須選出一條***特殊性的規(guī)則來應(yīng)用。CSS規(guī)則的特殊性可以用4個整數(shù)來表示，例如0，0，0，0.計算規(guī)則如下：

◆對于規(guī)則中的每個ID選擇符，特殊性加0，1，0，0

◆對于規(guī)則中每個類選擇符和屬性選擇符以及偽類，特殊性加0，0，1，0

◆對于規(guī)則中的每個元素名或者偽元素，特殊性加0，0，0，1

◆對于通配符，特殊性加0，0，0，0.

◆對于內(nèi)聯(lián)規(guī)則，特殊性加 1，0，0，0

最終得到結(jié)果就是這個規(guī)則的特殊性。兩個特殊性的比較類似字符串大小的比較，是從左往右依次比較，***個數(shù)字大的規(guī)則的特殊性高。上例中兩條規(guī)則的特殊性分別是0，0，0，1 和 0,0,0,2，顯然第二條勝出，因此最終字是藍色的。
注意，通配符的特殊性0,0,0,0看起來沒有作用，實際上不是，還有一種沒有特殊性的規(guī)則，0，0，0，0要比沒有特殊性更特殊，下面會介紹。

CSS還有一個!important標簽，用來改變CSS規(guī)則的特殊性。實際上，在解析CSS規(guī)則特殊性的時候，是將具有!important的規(guī)則和沒有此標簽的規(guī)則利用上述方法分別計算特殊性，分別選出特殊性***的規(guī)則。最終合并的時候，具有任何特殊性的帶有!important標記的規(guī)則勝出。

二、CSS繼承

所謂CSS繼承，就是父元素的規(guī)則也會適用于子元素。比如給body設(shè)置為color:Red;那么他內(nèi)部的元素如果沒有其他的規(guī)則設(shè)置，也都會變成紅色。CSS繼承得來的規(guī)則沒有特殊性。下面看一個簡單的例子：

Example Source Code

<html xmlns="http://www.w3.org/1999/xhtml"> <head>     <title>CSS Cascadetitle>     <style type="text/CSS">        *{color:Blue;}       div{color:Black;}       .imp{color:Red !important;}       #content{color:Green;}         style> head> <body>  <div>Hello <span>52CSS.comspan> div>  <div id="content">     <p class="imp">Titlep>     Content Goes Here.   div> body> html>

注意，***行的CSS并沒有繼承div的黑色，這是因為通配符的緣故。通配符的特殊性雖然是全0，但是還是比繼承的特殊性要高。第二行展示了!important標記的作用。
另外，一些明顯不應(yīng)該繼承的屬性，比如border,margin,padding之類的是不會被CSS繼承的，具體可以參考CSS手冊。

三、其他

雖然有4個整數(shù)來表示一個特殊性，仍然有可能出現(xiàn)兩條沖突的規(guī)則的特殊性完全一致的情況，此時就按照CSS規(guī)則出現(xiàn)的順序來確定，在樣式表中***一個出現(xiàn)的規(guī)則勝出。一般不會出現(xiàn)這樣的情況，只有一個情況例外，考慮如下樣式表：

Example Source Code

:active{color:Red;}  :hover{color:Blue;}  :visited{color:Purple;}  :link{color:Green;}

這樣頁面中的鏈接永遠也不會顯示紅色和藍色，因為一個鏈接要么被訪問過，要么沒有被訪問過。而這兩條規(guī)則在***，因此總會勝出。如果改成這樣:

Example Source Code

:link{color:Green;}    :visited{color:Purple;}  :hover{color:Blue;}  :active{color:Red;}

就能實現(xiàn)鼠標懸停和點擊的瞬間變色的效果。這樣的順序的首字母正好連成 “LoVe HA”,這樣的順序被約定俗成的叫做Love Ha 規(guī)則。

“CSS中層疊與繼承的使用方法”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

向AI問一下細節(jié)

CSS中層疊與繼承的使用方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽