第四节 CSS继承性和层叠性
一. 繼承性
? ?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继承性和层叠性的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 中信百度金融联名卡免息期有多长
- 下一篇: 详解CSS的相对定位和绝对定位