一. 繼承性

? ?1. 含義：從自己開始直到所包裹的最小的元素，都可以繼承一些特有的屬性。

? ?2. 作用范圍：?

? ? ? ?a.?color、text-開頭的、line-開頭的、font-開頭的，均可以繼承。

? ? ? ?b. 文字樣式的，都能繼承；所有關于盒子的、定位的、布局的都不能繼承。

? ?3. 實例：

? ?

二. 層疊性

? ?1. 背景：當多個選擇器同時關系到某一個標簽的時候，樣式以誰為準，這時牽扯層疊性，權重問題。

? ?2. 含義：就是CSS解決沖突的能力。（所有的權重計算，沒有任何兼容性問題）。

? ?3. 權重計算規則：

? ? ? ? A. 首先看是否選中了標簽，如果選中了標簽，那么按照（id數 > class類數 > 標簽數）來計算權重，誰大聽誰的；如果權重相同，以后寫的為準。

? ? ? ? B. 如果沒有選中，那么權重就是0，采取就近原則，誰隔著目標標簽近，就聽誰的。

? ?4. 經典5題：

? ? 第1題：

? ??? ??轉存失敗重新上傳取消

? ? ?解釋：都選中了，這個時候比較權重，答案為紅色。

? ? 第2題：

? ??

? ??解釋：都沒選中，權重為0；但紅色描述的與span標簽更近，所以答案為紅色。

? ? 第3題：

? ??

? ??解釋：第二個和第三個都沒選中，權重為0；第一個選中了，有權重，所以答案為綠色。

? ? 第4題：

? ? ??

?

? ? ? ?解釋：拆分開后，有三個選擇器，且都選中了，第二個和第三個權重相同，所以以后寫的為主，答案為綠色。

? ??第5題：

? ? ? ?

　　?解釋：只要有一絲希望能選中目標，我們就認為選中了，至于第一個選擇器的第一個div是誰，我們不需要關注，比較權重可知，答案為藍色

5. 權重深入

? A. 同一個標簽攜帶了多個類名，類名之間有沖突。

??

?

? ?B. ！important標記

? ? ? ? ? (1).可以給1個屬性提升權重，這個屬性的權重就無窮大。

? ? ? ? ? (2).該標記提升的是一個屬性，而不是一個選擇器。

? ? ? ? ? (3).該標記無法提升繼承的權重，該是0還是0。

? ? ? ? ? (4).該標記不影響就近原則。

? ? ? ? ? 案例：

? ? ? ? ? 1.?<p?id="para1"?class="spec">文字</p>

　　　　

轉存失敗重新上傳取消

? ? ? ? ? ?2.?

　　　　

?

? ? ? ? ? 3.?

? ? ? ? ???

?

　　　　總結： ！important標記，只有作用在一個選擇器包含的屬性上，且該選擇器選中了目標，此時！important才會起作用，對應未選中的、繼承的統統不起作用

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的第四节 CSS继承性和层叠性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。