標籤：
<!DOCTYPE html>
CSS選取器優先順序
相同優先順序下，位置在文檔後面的覆蓋前面的
不同優先順序下，越能具體描述元素的css選取器，優先順序越高
具體情況：
HTML元素繼承父級元素的CSS屬性 優先順序 -100
瀏覽器賦予HTML元素的預設CSS屬性 優先順序 -10
星號選取器 優先順序 0
*{background:#f00;}
類型(標籤)選取器 優先順序 1
div{background:#0f0;}
類名和偽類別選取器 優先順序 10
.aaa{background:#00f;}
id選取器 優先順序 100
#bbb{background:#ff0;}
HTML行內樣式 優先順序 1000
<div style="background:#0f0;">行內樣式優先順序1000</div>
!important 優先順序 10000
div{background:#0f0 !important;}
<!--
<style>
#b1{color:#ff0;}
.a1{color:#00f;}
div{color:#0f0 !important;}
*{color:#f00;}
</style>
<div class="a1" id="b1" style="color:#0ff;">你好我是div1</div>
<span>你好我是span2<span>
<p>
pppppppppp
<span>ssssssssssss</span>
<a href="###">aaaaaaaa</a>
</p>
<a href="###">aaaaaaaa</a>
-->
組合優先順序：
<style>
#wai, .nei, span, a{color:#f00;} /*優先順序每個獨立*/
#wai a{color:#ff0;} /*101*/
div p span a{color:#00f;} /*4*/
div .nei span a{color:#0ff;} /*13*/
</style>
<div id="wai">
ddddddddddddd
<p class="nei">
pppppppppp
<span>
ssssssssssss
<a href="###">aaaaaaa</a>
</span>
</p>
</div>
<a href="###">bbbbbbbb</a>
css-選取器-優先順序
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
