CSS的继承、权值与层叠
2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>
筆者最近在細(xì)細(xì)學(xué)習(xí)前端方面的基礎(chǔ)知識(shí)。以前對(duì)CSS布局的各式“花樣”總是摸不著頭腦，可以接受的就是absolute布局~~~不過(guò)近期所學(xué)的CSS特性，相比往常，要理解的更深刻，感覺(jué)挺受用，所以在這兒總結(jié)記錄一下，直入主題吧。
- CSS繼承
CSS的某些樣式具有繼承性。這個(gè)繼承是一種規(guī)則，允許樣式不僅應(yīng)用于某個(gè)特定html標(biāo)簽元素，而且應(yīng)用于其后代。例如：
p{color:red;border:1px solid red; }<p class="first">三年級(jí)時(shí)，我還是一個(gè)<span>膽小如鼠</span>的小女孩，上課從來(lái)不敢回答老師提出的問(wèn)題，生怕回答錯(cuò)了老師會(huì)批評(píng)我。就一直沒(méi)有這個(gè)勇氣來(lái)回答老師提出的問(wèn)題。學(xué)校舉辦的活動(dòng)我也沒(méi)勇氣參加。</p>顏色設(shè)置不僅應(yīng)用于p標(biāo)簽，還對(duì)子元素span標(biāo)簽起到了作用。
但是，有些樣式是不具有繼承性的，如“border:1px solid red;”。那么哪些樣式具有繼承性呢？筆者會(huì)根據(jù)后續(xù)的學(xué)習(xí)進(jìn)行追蹤報(bào)道的~
- CSS權(quán)值
有時(shí)為同一個(gè)元素設(shè)置了不同的CSS樣式代碼，那么元素會(huì)啟用哪個(gè)樣式呢？這就需要了解權(quán)值了，瀏覽器是采用權(quán)值高的樣式的。權(quán)值呢，又是跟CSS選擇器有關(guān)聯(lián)的，不同的選擇器，對(duì)應(yīng)了不同的權(quán)值。
**標(biāo)簽選擇器的權(quán)值為1，類(lèi)選擇符的權(quán)值為10，ID選擇符的權(quán)值最高為100。**如下示例：
p{color:red;} /*權(quán)值為1*/ p span{color:green;} /*權(quán)值為1+1=2*/ .warning{color:white;} /*權(quán)值為10*/ p span.warning{color:purple;} /*權(quán)值為1+1+10=12*/ #footer .note p{color:yellow;} /*權(quán)值為100+10+1=111*/還有一個(gè)權(quán)值比較特殊--繼承也有權(quán)值但很低，有的文獻(xiàn)提出它只有0.1，所以可以理解為繼承的權(quán)值最低。
說(shuō)白了，選擇器越能明確地指向元素，其權(quán)值就越高！這是筆者自創(chuàng)的^_^
- CSS層疊
如果同一個(gè)元素，多個(gè)CSS樣式存在且具有相同的權(quán)值，層疊的概念就出來(lái)了，此時(shí)瀏覽器會(huì)根據(jù)這些CSS樣式的前后順序來(lái)決定了，最后面的CSS樣式會(huì)被應(yīng)用。這個(gè)規(guī)則也解釋了關(guān)于CSS樣式的優(yōu)先級(jí)問(wèn)題。
- CSS優(yōu)先級(jí)
在頁(yè)面中使用CSS樣式，有三種方式，內(nèi)聯(lián)式、嵌入式、外部式。在相同權(quán)值的情況下，優(yōu)先級(jí)依次為：
內(nèi)聯(lián)式 > 嵌入式 > 外部式
上面的嵌入式 > 外部式還有前提，嵌入式CSS樣式的位置一定在外部式的后面（這也是常用的寫(xiě)法習(xí)慣）！看見(jiàn)沒(méi)，這是符合CSS層疊規(guī)則的。
什么是外部式？
<head><link href="style.css" rel="stylesheet" type="text/css"> </head>什么是嵌入式？
<head><style type="text/css">span{color:red;}</style> </head>什么是內(nèi)聯(lián)式？
<body><span style="color:red">互聯(lián)網(wǎng)</span> </body>轉(zhuǎn)載于:https://my.oschina.net/angerbaby/blog/473915
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
以上是生活随笔為你收集整理的CSS的继承、权值与层叠的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 清楚利弊，用好内联
- 下一篇： 网传剧组群演称猫被电死《当家主母》剧组已