今天晚上寫了一個頁面，結果發現用到了好多選擇器，尤其是在一個標籤上就有多個選擇器在起
作用，那麼當5個選擇器全部加在一個標籤上會發生什麼呢，我試了下。下面與大家分享下結果。
<html>
<head>
<style>
.c1{
background-color:red;
}
#d1{
background-color:blue;
}
body,div{
background-color:white;
}
body #d1{
background-color:yellow;
}
div{
background-color:green;
}
</style>
</head>
<body>
<div id='d1' class='c1'>你好</div>
</body>
</html>
背景顯示黃色，也就是說起作用的是body #d1這個派生選擇器，首先我們要弄懂一個概念，其實每個選擇器是都起作用的，css叫級聯樣式表，其實我覺得叫層疊樣式表讓人更好理解，顧名思義，也就是一層一層疊起來的，沒錯，實際上也是這樣的。所有選擇器都執行的，只不過派生選擇器是最後執行的，所以它把其他的選擇器的給覆蓋了，在這裏說優先級什麼的，我覺得還不如說執行的先後順序更好讓人理解。
好了，知道了派生選擇器是最後執行的，我們把代碼改下，把派生選擇器去掉，看看結果。
背景顯示藍色，所以除去派生選擇器後，最後一個執行的是id選擇器
去掉id選擇器，背景顯示紅色，所以除去id選擇器後，最後一個運行的是class選擇器
去掉class選擇器，背景顯示綠色，這裏有個問題，當你把分組選擇器和標籤選擇器位置換一下哎的話，那麼背景其實是會顯示白色的。
那麼接下來得出的結論是，分組選擇器和標籤選擇器哪個在前面，哪個先執行，接下來執行前面2個剩下來的一個，接下來執行class選擇器，接下是id選擇器，接下來是派生選擇器。
可能有人會覺得我上面的測試其實還不完全。是的，我只能說你很仔細，我上面測試並不完全，你完全可以把選擇器的順序隨意的調換，然後來得出跟我相同的結論。