css層疊問題?前端開發離不開CSS，相信很多同學在工作中都是“拿來主義”，遇見想要的樣式直接google、copy、paste也能實現UI設計師想要的效果是不是在某個夜深人靜的時候，腦海中也如流星般劃過某個想法：總有一天，我要系統性地學習一下CSS（這也是我曾經的想法）在接下來的一段時間，我将持續性、系統性地對CSS相關的知識點進行歸納和總結，也希望能夠幫助大家一起提升，達到“知其然，知其所以然”，下面我們就來聊聊關于css層疊問題?接下來我們就一起去了解一下吧!
前端開發離不開CSS，相信很多同學在工作中都是“拿來主義”，遇見想要的樣式直接google、copy、paste也能實現UI設計師想要的效果。是不是在某個夜深人靜的時候，腦海中也如流星般劃過某個想法：總有一天，我要系統性地學習一下CSS（這也是我曾經的想法）。在接下來的一段時間，我将持續性、系統性地對CSS相關的知識點進行歸納和總結，也希望能夠幫助大家一起提升，達到“知其然，知其所以然”。
層疊是什麼？CSS全稱是Cascading Style Sheet，Cascading代表的就是層疊。
CSS本質上是聲明的規則的集合，然而各種規則在聲明的時候是不相關的，在應用到具體的頁面元素的時候，卻有可能作用于同一個元素，就像各種規則一層層的疊加到一個元素上，最後由渲染引擎去判斷該使用哪個規則（樣式）。如下面的例子：
頁面标題有多個樣式規則
在上圖中，頁面标題元素分别定義了三個不同字體的樣式，最終應用到h1元素上的隻會是一個，到底怎麼解決這個沖突呢？這裡就要使用到層疊的規則。
當聲明沖突時，層疊會依據三種條件解決沖突：
用流程圖表示：
層疊規則的流程圖
接下來我們詳細介紹這三種條件。
樣式表的來源
你寫的樣式表（稱為作者樣式表）并不是浏覽器唯一使用的樣式表，還有用戶代理樣式表，即浏覽器默認樣式。
作者樣式表和用戶代理樣式表
用戶代理樣式在不同的浏覽器上表現不同，在實際的工作中使用的不多，常用樣式大多會被作者樣式表覆蓋。上面的例子中也可以看到用戶代理樣式被覆蓋了，說明作者樣式的優先級比用戶代理樣式的優先級高。
選擇器優先級
如果無法用樣式表的來源解決沖突，接下來會判斷選擇器的優先級。
浏覽器将優先級分為兩部分：行内樣式和選擇器樣式。一般行内樣式的優先級會比選擇器樣式的優先級要高。但是行内樣式隻會作用于當前的元素，我們主要聊聊選擇器樣式的優先級。選擇器優先級的準确規則如下：
需要注意的細節是，僞類選擇器（如:hover）和屬性選擇器（如[type="input"])與一個類選擇器的優先級相同。通用選擇器（*）和組合器（>、 、～）對優先級沒有影響。
我們可以使用優先級标記來準确的計算，比如“1，2，3”表示選擇器由1個ID、2個類、3個标簽組成。通過數值比較就能決定哪個選擇器優先級更高。
源碼順序
層疊的第三步，也是最後一步，是源碼順序。如果兩個聲明的來源和優先級相同，其中一個聲明在樣式表中出現較晚，則該聲明會覆蓋之前的聲明。
也就是說可以通過控制源碼順序，來添加/覆蓋樣式。
總結本篇我們介紹了層疊的概念以及層疊的具體規則，對于樣式的優先級相信大家在工作中每天都會遇到，這篇文章有沒有讓你對“層疊”了解的更全面呢？歡迎大家留言與我分享。
另外，相信有些小夥伴已經注意到，我沒有提及另一個優先級的關鍵字：important。是因為important是一種暴力提高優先級的辦法，給樣式聲明important會讓層疊的優先級失去意義，而且想覆蓋一個important，隻能在另一個聲明中寫兩個important。所以，建議大家還是老老實實的使用層疊的規則來合理的聲明樣式。在比較特殊、例外的場景下，再去使用important。
更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
