去年11月份開始學習前端，前不久老師問：什么是層疊？聽著這個熟悉又陌生的詞，我腦海出現的是：疊放在桌子上的一摞書，
意識到自己對層疊概念是模糊的后，立刻對層疊的定義進行了查詢，
搜索百度百科：層疊即層層疊疊，針對給出的解釋加上我自己的理解：所打開的多個檔案視窗交錯在一起，可以通過滑鼠的拖動與點擊，改變它們顯示的優先級，優先級低的就會被優先級高的一層給遮擋住，也像我自己理解的書桌上的一摞書垂直疊放，放在下面的書會被放在上面的書遮擋，放在最上面的那層能被使用者看到，相同的點是，我們的標簽也像書一樣，垂直于瀏覽器的方向摞著，層疊著，層級越高的越先顯示給用戶看到，
搜索CSDN，發現一個博主相關的博文：
著作權宣告：本文為博主原創文章，遵循 CC 4.0 BY-SA 著作權協議，轉載請附上原文出處鏈接和本宣告，
本文鏈接：https://blog.csdn.net/qq_37204849/article/details/73440925s
以下就是我的識訓與感想總結啦~
把層疊理解為“權重”，“覆寫”，“繼承”，我對它的理解是：比較優先級大小后的樣式覆寫，
談樣式的優先級就涉及到 繼承 與 選擇器，
1、繼承：
可以繼承的樣式有（繼承的樣式優先級最低）：
文本相關屬性：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>
顯示結果為：
|
2、優先級
（1）樣式優先級（高--->低）：
行內樣式：在標簽中直接寫的樣式，<div style="color:red;"></div>
行內樣式：在head標簽中寫的樣式，<style> div { color:red; }</style>
外聯樣式：在link中引入的外部樣式，<link href="https://www.cnblogs.com/qhm-1440/p/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 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，則再利用規則3、4判斷優先級， |
總結
問題：什么是層疊？
回答：可以理解為比較優先級大小后的樣式覆寫，比較樣式的優先級，優先級高的可以覆寫優先級低的，垂直于瀏覽器優先顯示，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/173562.html
標籤：Html/Css
上一篇：Bootstrap 網格系統