CSS - 层叠特性
本文和大家聊聊CSS的層疊屬性。CSS的全名叫做“層疊樣式表”，這里的“層疊”是什么意思呢？為什么這個(gè)詞如此重要，以至于要出現(xiàn)在它的名稱里。
?
一. 層疊特性
CSS的層疊特性確實(shí)很重要，但是不能和“繼承”相混淆，二者有著本質(zhì)的區(qū)別。層疊可以簡(jiǎn)單地理解為“沖突”的解決方案。例如有以下代碼：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>層疊特性</title> <style>p{color: green;}.red{color: red;}.purple{color: purple;}#line3{color: blue;} </style> </head> <body><p>這是第1行文本</p><p class="red">這是第2行文本</p><p id="line3" class="red">這是第3行文本</p><p style="color: orange;" id="line3">這是第4行文本</p><p class="purple red">這是第5行文本</p> </body> </html>代碼中一共有5組p標(biāo)記定義的文本，并在head部分聲明了4個(gè)選擇器，聲明為不同顏色。下面的任務(wù)是確定每一行文本的顏色。
- 第1行文本沒有使用類別樣式和ID樣式，因此這行文本顯示為標(biāo)記選擇器p中定義的綠色。
- 第2行文本使用了類別樣式，因此這時(shí)已經(jīng)產(chǎn)生了“沖突”。那么，是按照標(biāo)記選擇器p中定義的綠色顯示，還是按照類別選擇器中定義的紅色顯示呢？由于類別選擇器的優(yōu)先級(jí)高于標(biāo)記選擇器，因此顯示為類別選擇器中定義的紅色。
- 第3行文本同時(shí)使用了類別樣式和ID樣式，這又產(chǎn)生了“沖突”。那么，是按照類別選擇器中定義的紅色顯示，還是按照ID選擇器中定義的藍(lán)色顯示呢？由于ID選擇器的優(yōu)先級(jí)高于類別選擇器，因此顯示為ID選擇器中定義的藍(lán)色。
- 第4行文本同時(shí)使用了行內(nèi)樣式和ID樣式，那么這時(shí)又以哪一個(gè)為準(zhǔn)呢？由于行內(nèi)樣式的優(yōu)先級(jí)高于ID樣式的優(yōu)先級(jí)，因此顯示為行內(nèi)樣式定義的橙色。
- 第5行文本中，使用了兩個(gè)類別樣式，應(yīng)以哪個(gè)為準(zhǔn)呢？由于兩個(gè)類別選擇器的優(yōu)先級(jí)相同，此時(shí)以前者為準(zhǔn)，顯示為“.purple”中定義的紫色。
綜上所述，優(yōu)先級(jí)的規(guī)則可以表述為：行內(nèi)樣式>ID樣式>類別樣式>標(biāo)記樣式。代碼最終顯示結(jié)果如下圖所示。
?
二. 應(yīng)用
在復(fù)雜的頁面中，某一個(gè)元素有可能會(huì)從很多地方獲得樣式，例如一個(gè)網(wǎng)站的某一級(jí)標(biāo)題整體設(shè)置為使用綠色，而對(duì)某個(gè)特殊欄目需要使用藍(lán)色，這樣在該欄目中就需要覆蓋通用的樣式設(shè)置。在很簡(jiǎn)單的頁面中，這樣的特殊需求實(shí)現(xiàn)起來不會(huì)很難，但是如果網(wǎng)站的結(jié)構(gòu)很復(fù)雜，就完全有可能使代碼變得非?；靵y，可能出現(xiàn)無法找到某一個(gè)元素的樣式來自于哪條規(guī)則的情況。因此，必須要充分理解CSS中的“層疊”原理。
?
?
好了，本篇文章就介紹到這兒，歡迎大家留言交流；喜歡或有幫助到您的話，點(diǎn)個(gè)贊或推薦支持一下！
轉(zhuǎn)載于:https://www.cnblogs.com/johnvwan/p/9574670.html
總結(jié)
以上是生活随笔為你收集整理的CSS - 层叠特性的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C#获取文件夹及文件的大小与占用空间的方
- 下一篇： 深入理解CSS六种颜色模式