什麼是層疊樣式？

　　去年11月份開始學習前端，前不久老師問：什麼是層疊？聽着這個熟悉又陌生的詞，我腦海出現的是：疊放在桌子上的一摞書。

　　意識到本身對層疊概念是模糊的後，馬上對層疊的定義進行了查詢。

　　搜索百度百科：層疊即層層疊疊。針對給出的解釋加上我本身的理解：所打開的多個文件窗口交錯在一塊兒，能夠經過鼠標的拖動與點擊，改變它們顯示的優先級，優先級低的就會被優先級高的一層給遮擋住。也像我本身理解的書桌上的一摞書垂直疊放，放在下面的書會被放在上面的書遮擋，放在最上面的那層能被使用者看到。相同的點是，咱們的標籤也像書同樣，垂直於瀏覽器的方向摞着，層疊着，層級越高的越先顯示給用戶看到。

　　搜索CSDN，發現一個博主相關的博文：

版權聲明：本文爲博主原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處連接和本聲明。

本文連接：https://blog.csdn.net/qq_37204849/article/details/73440925s

　　如下就是個人收穫與感想總結啦~

　　把層疊理解爲「權重」，「覆蓋」，「繼承」，我對它的理解是：比較優先級大小後的樣式覆蓋。

　　談樣式的優先級就涉及到  繼承  與  選擇器。

　　一、繼承：

　　　　能夠繼承的樣式有（繼承的樣式優先級最低）：

　　　　文本相關屬性：color,font-family,font-size,font-weight,letter-spacing（字母間距）,line-height，text-align,text-indent（首行文本縮進）,text-transform（控制大小寫）...

如下是我本身測試的代碼： <style> div { background-color: pink; } #father { color:red; font-size:28px; text-indent: 2em; font-weight:700; text-align: center; font-family:'Courier New', Courier, monospace; letter-spacing: 1em; text-transform: uppercase; } </style> 本來模樣: <div> <div>每天開心喲~Happy <br>每天開心喲~Happy</div></div> </div> <hr> 給父級元素加了樣式後: <div id="father"> <div>每天開心喲~Happy <br>每天開心喲~Happy</div> </div> 　　顯示結果爲：

 

　　二、優先級

（1）樣式優先級（高--->低）：

行內樣式：在標籤中直接寫的樣式。<div style="color:red;"></div>

內聯樣式：在head標籤中寫的樣式。<style>  div { color:red; }</style>

外聯樣式：在link中引入的外部樣式。<link href="style.css">

（2）選擇器的優先級

***須要注意的點

選擇器的權重：!import （∞）> id選擇器（100） > 類選擇器（10） > 標籤選擇器（1） 權重是能夠疊加計算的，權重大的會覆蓋小的樣式；權重相同的樣式，寫在後面的樣式會覆蓋寫在前面的。 在上一秒時我仍是秉持着權重能夠經過相加計算來比較，直到寫隨筆記爲了準確性心血來潮查了菜鳥文檔，在文檔末尾有了個大發現：  而後我馬上實驗了一波，使用13個類、1個ID和13個類一個ID的疊加進行了測試： <style> 　　　　　/* .cls1.cls2.cls3.cls4.cls5.cls6.cls7.cls8.cls9.cls10.cls11.cls12.cls13#box {             color:aqua;         } */         #box {             color:red;         }          .cls1.cls2.cls3.cls4.cls5.cls6.cls7.cls8.cls9.cls10.cls11.cls12.cls13 {             color:aqua;         }  </style> <div > 我是爸爸 <div class="cls1 cls2 cls3 cls4 cls5 cls6 cls7 cls8 cls9 cls10 cls11 cls12 cls13" id="box"> 我是兒子 </div> </div> 最終13個類選擇器都幹不過1個ID選擇器，結果顯示的是ID選擇器裏的樣式，因此單純地使用100,10,1來計算優先級是不許確的。 顯示效果爲：

立馬拿出個人小筆記本本，動了動個人小指頭。

筆記內容：

CSS優先規則1：最近的祖先樣式比其餘祖先樣式有限極高。 CSS優先規則2：「直接樣式」比「祖先樣式」優先級高。 CSS優先規則3：優先級關係：內聯樣式>ID選擇器>類選擇器=屬性選擇器=僞類選擇器>標籤選擇器=僞元素選擇器。 CSS優先規則4：計算選擇符中ID選擇器的個數（a），計算選擇符中類選擇器、屬性選擇器以及僞類選擇器的個數之和（b），計算選擇符中標籤選擇器和僞元素選擇器的個數之和（c）。按a，b，c的順序一次比較大小，大的則優先級高，相等則比較寫下一個。若最後兩個的選擇符中a，b，c都相等，則按照「就近原則」來判斷。 CSS優先規則5：屬性後插有1important的屬性擁有最高優先級。若同同時插有!important，則再利用規則三、4判斷優先級。

 

---

總結

問題：什麼是層疊？

回答：能夠理解爲比較優先級大小後的樣式覆蓋。比較樣式的優先級，優先級高的能夠覆蓋優先級低的，垂直於瀏覽器優先顯示。