css的繼承、層疊和特殊性

1.css的繼承


1-1,

p {

? ? ?color: #2f2

}

以上p標(biāo)簽的設(shè)置不僅僅應(yīng)用于p標(biāo)簽,還應(yīng)用于p標(biāo)簽中的所有子元素的文本(這便是css的繼承)

1-2,

不過(guò)不是所有css樣式都可以繼承,如:

p {?

? ? border: ?1px ?solid ?#22F

}

p標(biāo)簽的此設(shè)置便不會(huì)被p標(biāo)簽中的子元素繼承,它只設(shè)置p標(biāo)簽。


2,css的特殊性

2-1,css選擇符的權(quán)值

2-1.1:id選擇符的權(quán)值為100

2-1.2:類選擇符的權(quán)值為10

2-1.3:標(biāo)簽的權(quán)值為1

2-1.4:繼承也是有權(quán)限的,不過(guò)它的權(quán)限僅有0.1,是權(quán)限最小的

2-2,權(quán)值高的規(guī)定css的樣式

2-3,權(quán)值的算法

2-3.1

#div1 p { color:yellow } /* 權(quán)值為 100+1=101 */ ? ?

2-3.2

#div1 .class p { color:yellow } /* 權(quán)值為 100+10+1=111 */

2-3.3

p span { color:yellow } /* 權(quán)值為 1+1=2 */

2-3.4

.class span { color:yellow } /* 權(quán)值為 10+1=11 */

3,層疊

3-1,在html中一個(gè)元素?fù)碛卸鄠€(gè)樣式,且權(quán)值相等,那么那個(gè)樣式在后面那個(gè)樣式便被應(yīng)用

h1 {?

? ? color: green?

}

h1 {

? ? color: red

?}

運(yùn)行效果:

color:red被應(yīng)用

3-2,css樣式表的優(yōu)先級(jí)

內(nèi)聯(lián)樣式表(標(biāo)簽內(nèi)部)>嵌入樣式表(當(dāng)前文件)>外部樣式表(外部文件)

4,重要性

為樣式設(shè)置最高權(quán)重,使用!important

h1 {

? ? color: green!important;

}

h1 {

? ? color: red;

}

運(yùn)行效果:

color: green!important; 被應(yīng)用

在網(wǎng)頁(yè)制作時(shí)不設(shè)計(jì)樣式是的優(yōu)先級(jí):

?用戶自己設(shè)置的樣式>網(wǎng)頁(yè)制作者樣式>瀏覽器默認(rèn)的樣式

但!important的權(quán)值高于用戶自己設(shè)置的樣式,優(yōu)先應(yīng)用

最后編輯于
?著作權(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的某些樣式是具有繼承性的,繼承是一種規(guī)則,它允許樣式不僅應(yīng)用于某個(gè)特定html標(biāo)簽元素,而且...
    sophies閱讀 330評(píng)論 0 0
  • CSS基礎(chǔ) 本文包括CSS基礎(chǔ)知識(shí)選擇器(重要?。。。├^承、特殊性、層疊、重要性CSS格式化排版單位和值盒模型浮動(dòng)...
    廖少少閱讀 3,461評(píng)論 0 40
  • 第6章 開(kāi)始學(xué)習(xí)CSS,為網(wǎng)頁(yè)添加樣式 1、認(rèn)識(shí)CSS樣式CSS全稱為“層疊樣式表 (Cascading Styl...
    夏沫xx閱讀 1,116評(píng)論 1 11
  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,206評(píng)論 1 92
  • 是不是標(biāo)題挺氣人呢? 嘻嘻 別氣 繼續(xù)讀 是不是經(jīng)常看一些方法類的東西?但是,現(xiàn)在所有的讀書類、學(xué)習(xí)的軟件、書籍、...
    冰淇淋在路上閱讀 399評(píng)論 4 0

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