關於CSS樣式的優先順序問題

zero發表於2018-01-19
CSS

在CSS中，你可以為同一個標籤定義多個樣式，如下面的例子：

#aaa{
background-color: Fuchsia;
}
.ab{
background-color: Black;
}
td{
background-color: Aqua ;
}

<table>
<tr>
<td class="ab" id="aaa" style="height:200px;width:200px;background-color: Blue;"></td>
</tr>
</table>

這麼多的樣式，哪個是有效的呢？ 我們一個一個把上面的樣式刪除，在瀏覽器中可以看到： style的優先順序最高，然後是id，再來是class，最後才是td 另外，使用!important可以改變優先順序別為最先，如下：

#aaa{
background-color: Fuchsia;
}
.ab{
background-color: Black;
}
td{
background-color: Aqua !important;
}


<table>
<tr>
<td class="ab" id="aaa" style="height:200px;width:200px;background-color: Blue;"></td>
</tr>
</table>

td將會顯示為Aqua 即優先順序變為td，然後是style，再來是id，最後是class

歡迎來討論：http://www.webprep.cn/

相關文章