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