章節(jié)(11) CSS三大特性

CSS三大特性 : 繼承,層疊,優(yōu)先級(jí)

一. 繼承性

1.什么是繼承性?

作用: 給父元素設(shè)置一些屬性, 子元素也可以使用, 這個(gè)我們就稱之為繼承性

注意點(diǎn):
  • 1.并不是所有的屬性都可以繼承, 只有以<strong>color/font-/text-/line-</strong>開頭的屬性才可以繼承
  • 2.在CSS的繼承中不僅僅是兒子可以繼承, 只要是后代都可以繼承
  • 3.<strong>繼承性中的特殊性</strong>
  • 3.1 a標(biāo)簽的文字顏色和下劃線是不能繼承的(<strong>也就是說 不能通過繼承獲得</strong>)
  • 3.2 h標(biāo)簽的文字大小是不能繼承的(<strong>也就是說 不能通過繼承獲得</strong>)
應(yīng)用場(chǎng)景:

一般用于設(shè)置網(wǎng)頁上的一些共性信息, 例如網(wǎng)頁的文字顏色, 字體,文字大小等內(nèi)容;
body{} >>> 一般在body里面設(shè)置共性信息

二. 層疊性

1.什么是層疊性?

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

注意點(diǎn):

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

CSS全稱 Cascading StyleSheet (層疊式樣式表)
列如:
 <style>
        p{
            color: red;
        }
        .para{
            color: blue;
        }
 </style>
 <p id="identity" class="para">我是段落</p>

三. 優(yōu)先級(jí)

1.什么是優(yōu)先級(jí)?

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

2.優(yōu)先級(jí)判斷的三種方式
  • 2.1間接選中就是指繼承
    如果是間接選中, 那么就是誰離目標(biāo)標(biāo)簽比較近就聽誰的
  • 2.2相同選擇器(直接選中)
    如果都是直接選中, 并且都是同類型的選擇器, 那么就是誰寫在后面就聽誰的
  • 2.3不同選擇器(直接選中)
    如果都是直接選中, 并且不是相同類型的選擇器, 那么就會(huì)按照選擇器的優(yōu)先級(jí)來層疊:
id>類>標(biāo)簽>通配符>繼承>瀏覽器默認(rèn)

id>類>標(biāo)>通>繼>瀏

四. !important

1.什么是!important

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

注意點(diǎn):
  • 1.!important只能用于直接選中, <strong>不能用于間接選中</strong>
  • 2.通配符選擇器選中的標(biāo)簽也是直接選中的,也可以用!important提升優(yōu)先級(jí)
  • 3.!important只能提升被指定的屬性的優(yōu)先級(jí), 其它的屬性的優(yōu)先級(jí)不會(huì)被提升
  • 4.!important必須寫在屬性值得分號(hào)前面
  • 5.!important前面的感嘆號(hào)不能省略
  <style>
      p{
         color: red !important; //提升優(yōu)先級(jí)到最高
         font-size: 30px; //不會(huì)提升優(yōu)先級(jí)(說明了上面的第3點(diǎn))
       }
  </style>

五. 優(yōu)先級(jí)的權(quán)重

1.什么是優(yōu)先級(jí)的權(quán)重?

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

2.權(quán)重的計(jì)算規(guī)則
  • 2.1首先先計(jì)算選擇器中有多少個(gè)id, id多的選擇器優(yōu)先級(jí)最高
  • 2.2如果id的個(gè)數(shù)一樣, 那么再看類名的個(gè)數(shù), 類名個(gè)數(shù)多的優(yōu)先級(jí)最高
  • 2.3如果類名的個(gè)數(shù)一樣, 那么再看標(biāo)簽名稱的個(gè)數(shù), 標(biāo)簽名稱個(gè)數(shù)多的優(yōu)先級(jí)最高
  • 2.4如果id個(gè)數(shù)一樣, 類名個(gè)數(shù)也一樣, 標(biāo)簽名稱個(gè)數(shù)也一樣, 那么就不會(huì)繼續(xù)往下計(jì)算了, 那么此時(shí)誰寫在后面聽誰的
    也就是說優(yōu)先級(jí)如果一樣, 那么誰寫在后面聽誰的
注意點(diǎn):
  • 1). 只有選擇器是直接選中標(biāo)簽的才需要計(jì)算權(quán)重, 否則一定會(huì)聽直接選中的選擇器的;
  • 2). 通配符的權(quán)重為0
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

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

  • CSS選擇器 標(biāo)簽選擇器 什么是標(biāo)簽選擇器? 作用: 根據(jù)指定的標(biāo)簽名稱, 在當(dāng)前界面中找到所有該名稱的標(biāo)簽, 然...
    Jackson_yee_閱讀 561評(píng)論 0 0
  • CSS選擇器及三大特性 標(biāo)簽(空格分隔): H5+CSS [TOC] CSS CSS選擇器 標(biāo)簽選擇器 id選擇器...
    袁俊亮技術(shù)博客閱讀 1,388評(píng)論 0 0
  • ## CSS三大特性 # 繼承性(inherit) # 層疊性 # 優(yōu)先級(jí) # important # div標(biāo)簽...
    KsKison閱讀 415評(píng)論 0 0
  • 谷歌瀏覽器開發(fā)者工具使用 進(jìn)入谷歌瀏覽器后如下圖操作,或者按F12 調(diào)整樣式![](http://upload-i...
    MGd閱讀 327評(píng)論 0 0
  • 早上好:) 在Dior2017秀場(chǎng)上,紗裙就占有70%。很多明星出席宴會(huì),上雜志也都能看到紗裙的存在??梢娂喨褂卸?..
    鰻言閱讀 2,219評(píng)論 9 26

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