標籤：comment 事件 sdn 作用 html dem css基礎 border 目的
對於前端而言，瞭解css樣式的優先順序，對開發或處理bug有著事半功倍的效果，今天在做項目的時候，突然碰到一個優先順序的小問題，剛開始不知道所因，後來才發現這個問題是由優先順序造成的。先描述下問題，滑鼠移至上方在父容器時，子容器顯示，移開消失。看到這個問題，可能有些人要噴了，這和優先順序有毛線關係，看起來的確沒關係，其實還是存在一定關係的。假如你在書寫子容器樣式時，採用的是內聯式寫法，那麼這個懸停是否還有作用呢？看下面的代碼……
範例程式碼
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>我是一個測試Demo</title> <style> .divTest{width: 200px;height: 100px;border: 3px solid red;font-size: 14px;text-align: center;margin: 10px 0} .divTest h2{display: none} .divTest:hover h2{display: block} </style></head><body> <div class="divTest"> <h2>是不是想我！！！</h2> </div> <div class="divTest"> <h2>是不是想我！！！</h2> </div> <div class="divTest"> <h2 style="display: none">想我也沒用！！！</h2> </div></body>測試這個Demo時，會發現滑鼠移至上方在第三個div時，並沒有任何效果。為什麼會出現這種問題，是不是滑鼠hover事件沒有被觸發，雖然認為這個是不可能的，但我還是測試了下，我將第三個內聯樣式去除，發現hover事件是可以被觸發的，那是什麼原因造成的呢？
分析原因
滑鼠hover事件可以被觸發，在內聯中寫入display: none卻毫無作用，那麼是什麼原因造成的？是不是內聯中寫入display: none，會禁止hover事件？答案並非如此，內聯的display: none，並沒有禁止滑鼠hover事件，而是因為內聯樣式的優先順序要遠遠高於別的引入方式。
過程大概是這樣：
如何在不修改內聯樣式條件下，可以讓它正常出現
css中的一個屬性：!important
描述：提升指定樣式規則的應用優先權。
如果說內聯樣式是遠程飛彈威力驚人，那麼!important就好比核武器毀天滅地。它的優先順序可以說是css中權重最大，當然是在不考慮相容性的情況下。
.divTest:hover h2{display: block !important;}
在不相容!important屬性的瀏覽器中，上面的Demo可以實現預想的效果，因為!important的優先順序要高於內聯樣式優先順序。
css優先順序規則
p{color: red;font-size: 14px}/*標籤選取器*/ .test{color: red;font-size: 14px}/*類別選取器*/ #warp{color: red;font-size: 14px}/*id選取器*/ *{color: red;font-size: 14px}/*通用選取器*/ div,h2,p{color: red;font-size: 14px}/*群組選取器*/ div a{color: red;font-size: 14px}/*後代選取器*/ div>a{color: red;font-size: 14px}/*子選取器*/ h2+p{color: red;font-size: 14px}/*同胞選取器*/
p[title]{color: red;font-size: 14px} p[class="test"]{color: red;font-size: 14px}
css優先順序（借鑒前輩整理的筆記）
id選取器預設優先順序最高，其權值為100
class選取器、屬性選取器和偽類別選取器的權值為10
標籤選取器的優先順序較低，其權值為1 所以在比較樣式的優先順序時，只需統計選擇符中的id、class、標籤名個數，然後把對應的權值相加即可。根據結果便可得出優先順序高低。
如果樣式值中含有!important，則該值優先順序最高
h2{color:blue;}//其權值為1 #content{color:#666;}//其權值為100p .test{color:#ccc;}//其權值為1+10=11 #main div .test{color:red;}//其權值為100+1+10=111div #main .left #nav{color:#000}//其權值為1+100+10+100=211
總結
css優先順序是前端必須掌握的基礎知識，在開發或者修改頁面bug時，不同情境都的css樣式問題很有可能是由於css優先順序所造成的，所以面對頁面樣式問題時，將css優先順序考慮其中，或許能夠得到意想不到的效果。
css 優先順序的bug
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
