CSS樣式優先順序別： 加權 > 特指度 > 層疊 > 繼承 加權：!important特指度：ICE值層疊：樣式載入順序繼承：子元素繼承父元素樣式 ...
CSS樣式優先順序別：
加權 > 層疊 > 特指度 > 繼承
加權：!important
層疊：樣式載入順序
特指度：ICE值
繼承：子元素繼承父元素樣式
CSS代碼：
#summer-drinks li { font-weight: normal; font-size: 12px; color: black; } #summer-drinks li.favorite { color: hsl(0, 100%, 50%) !important; /* 去掉 !important 的效果? */ font-weight: bold; } ul#summer-drinks li.favorite { color: aqua; }
HTML代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CSS權威指南學習</title> </head> <body> <ul id="summer-drinks"> <li class="favorite" style="color: teal">Whiskey and Ginger Ale </li> <!-- 加入 !important 的效果? --> <li>Wheat Beer </li> <li>Mint Julip </li> </ul> </body> </html>
大家猜猜，不修改代碼時第一個 li 會是什麼顏色？如果去掉<style>標簽中的 !important後 li 又會是什麼顏色呢？如果在 li 的style屬性中加入 !important後 li 又會是什麼顏色呢？
