CSS三大特性

一、 繼承性

1、 什么是繼承性?

  • 作用:給我們的父元素設(shè)置一下屬性,子元素也可以使用,我們稱之為繼承性。
  • 注意點:
  1. 并不是所有的屬性都可以繼承,只有以color/font-/text-/line開頭的屬性才可以繼承。
  2. 在CSS的繼承中,不僅僅是兒子可以繼承,只要是后代都可以繼承。
  3. 繼承中的特殊性:
  1. a 標(biāo)簽的文字顏色和下劃線是不能繼承的;
  2. h 標(biāo)簽中的文字大小是不能繼承的;

2.應(yīng)用場景:

一般用于設(shè)置網(wǎng)頁上的共性信息,例如網(wǎng)頁的文字顏色,字體,文字大小內(nèi)容。

二、層疊性

1、 什么是層疊性?

  • 作用:層疊性就是CSS 處理沖突的一種能力。

  • 注意點:

層疊性只有在多個選擇器選中同一個標(biāo)簽,然后有設(shè)置了相同的屬性,才會發(fā)生層疊性。

三、優(yōu)先級

1、 什么是優(yōu)先級?

  • 作用:當(dāng)多個選擇器選中同一個標(biāo)簽,并且給同一個標(biāo)簽設(shè)置相同的屬性,如果層疊就由優(yōu)先級來確定。

2、判斷優(yōu)先級的三種方式

2.1 是否是直接選中(間接選中就是指繼承),如果是間接選中,那么誰離目標(biāo)標(biāo)簽比較近,就聽誰的。
2.2 是否是相同的選擇器,如果都是直接選中,并且都是相同的選擇器,那么就是誰寫在后面,就聽誰的。
2.3 不同選擇器,如果就是直接選中,并且不是相同類型的選擇器,那么就會按照選擇器的優(yōu)先級來層疊。

優(yōu)先級如下: id> 類> 標(biāo)簽>通配符>繼承>瀏覽器默認(rèn)。

四、!important

1、 什么是!important

  • 作用: 用于提升某個直接選中標(biāo)簽的選擇器中的某個屬性的優(yōu)先級的,可以將指定的屬性的優(yōu)先級提升為最高
  • 注意點:

1.! important 只能用于直接選中,不能用于間接選中。

  1. 通配符選中的標(biāo)簽,也是直接選中的。
  2. !important 只能提升被指定的屬性的優(yōu)先級,其他的屬性的優(yōu)先級不會被提升。
    ! important 必選寫在屬性值的分號里面;
    其前面的感嘆號不能省略。

五、權(quán)重

1、 什么是優(yōu)先級的權(quán)重

  • 作用:當(dāng)多個選擇器混合一起使用時,我們可以計算權(quán)重來判斷誰的優(yōu)先級最高

2、權(quán)重的計算規(guī)則

  • 2.1 首先先計算選擇器中有多少個id。id多的選擇器優(yōu)先級最高
  • 2.2 如果id 的個數(shù)一樣,那么在看類名的個數(shù),類名多的優(yōu)先級高。
  • 2.3 如果類名的個數(shù)一樣,那么再看標(biāo)簽的個數(shù),標(biāo)簽個數(shù)多的優(yōu)先級高。
  • 2.4 如果類名、id名,標(biāo)簽名都一樣,那么這個時候的優(yōu)先級由先后順序決定的,誰在后面,顯示誰的。

3、注意點:

只有選擇器是直接選中標(biāo)簽的,才會計算權(quán)重。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • CSS三大特性 : 繼承,層疊,優(yōu)先級 一. 繼承性 1.什么是繼承性? 作用: 給父元素設(shè)置一些屬性, 子元素也...
    壹點微塵閱讀 165評論 0 0
  • ## CSS三大特性 # 繼承性(inherit) # 層疊性 # 優(yōu)先級 # important # div標(biāo)簽...
    KsKison閱讀 415評論 0 0
  • CSS三大特性 繼承性 什么是繼承性? 作用: 給父元素設(shè)置一些屬性, 子元素也可以使用, 這個我們就稱之為繼承性...
    極客江南閱讀 8,104評論 5 65
  • 谷歌瀏覽器開發(fā)者工具使用 進(jìn)入谷歌瀏覽器后如下圖操作,或者按F12 調(diào)整樣式![](http://upload-i...
    MGd閱讀 333評論 0 0
  • CSS三大特性 繼承性 什么是繼承性? 作用: 給父元素設(shè)置一些屬性, 子元素也可以使用, 這個我們就稱之為繼承性...
    Zalman1閱讀 195評論 0 0

友情鏈接更多精彩內(nèi)容