繼承、優(yōu)先級(jí)、層疊

繼承

假設(shè)要將頁(yè)面中所有文字的字體設(shè)為微軟雅黑

body{font-family:"Microsoft Yahei";} 應(yīng)用到body所有的子元素上去

繼承屬性

- color

- font

- text-align

- list-style

-...0

非繼承屬性

- background

- border

- position

- ...

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

計(jì)算方法

- a=行內(nèi)樣式

- b=ID選擇器的數(shù)量

- c=類、偽類和屬性選擇器的數(shù)量

- d=標(biāo)簽選擇器和偽元素選擇器的數(shù)量

value=a*1000+b*100+c*10+d

CSS層疊

相同的屬性會(huì)覆蓋

- 優(yōu)先級(jí)

- 后面覆蓋前面

不同的屬性會(huì)合并

p{

??? color:blue;

??? text-align:left;

??? font-weight:bold;

}

p.special{

??? color:red;

??? text-align:right;

}

p:first-child{color:green;}

合并:{font-weight:bold;text-align:right;color:green;}

CSS改變優(yōu)先級(jí)

<p class="tip special">提升選擇器的優(yōu)先級(jí)</p>

改變先后順序 后面的選擇器覆蓋掉前面的樣式

.special{color:red;} 優(yōu)先

.tip{color:red;}

提升選擇器優(yōu)先級(jí)

p.special{color:red;} 優(yōu)先

!important 最后使用

tip{color:blue !important;}

最后編輯于
?著作權(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)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

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

  • 1.CSS簡(jiǎn)介 Cascading Style Sheet 層疊樣式表 主要用來(lái)定義頁(yè)面中的表現(xiàn),HTML 描述頁(yè)...
    hyt222閱讀 1,010評(píng)論 0 0
  • 繼承 繼承屬性有 color font text-align list-style 非繼承屬性有 backgrou...
    小九喵喵閱讀 186評(píng)論 0 0
  • CSS基礎(chǔ) 本文包括CSS基礎(chǔ)知識(shí)選擇器(重要?。。。├^承、特殊性、層疊、重要性CSS格式化排版單位和值盒模型浮動(dòng)...
    廖少少閱讀 3,453評(píng)論 0 40
  • 學(xué)習(xí)CSS的最佳網(wǎng)站沒(méi)有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_閱讀 1,199評(píng)論 0 1
  • 戀愛(ài)啊,就是人們尋找相似的或者互補(bǔ)的人的過(guò)程。 有人告訴我,這二者并不矛盾——“相似點(diǎn)很多的,也可以是與你互補(bǔ)...
    阿拉垃圾君QvQ閱讀 396評(píng)論 0 0

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