-------------id選擇器(1對1的關系,一個元素只能對應一個ID,同樣的一個ID也只能對應一個元素)---------------
html:
<div id="only"></div>
css:
#only{
width:100px;
height:100px;
background-color:red;
}
-------------class選擇器(多對多的關系,一個元素可以有多個class,同樣一個class能夠讓多個元素使用)---------------
html:
<div class="class1 class2 .... classN"></div>
css:
.class1{
width:100px;
height:100px;
background-color:red;
}
-------------標簽選擇器---------------
html:
<div></div>
css:
div{
width:100px;
height:100px;
background-color:red;
}
-------------通配符選擇器---------------
css:
*{
background-color:red;
}
-------------屬性選擇器---------------
html:
<input type="text">
<input type="password">
css:
input [type="text"]{
background-color:red;
}
-------------------------優先級(權重)----------------------
優先級:
!important > 行間樣式 > id選擇器 > (屬性選擇器 == class選擇器) > 標簽選擇器 > 通配符選擇器
權重:
!important(正無窮)
行間樣式(1000)
id選擇器(100)
屬性選擇器||class選擇器||偽類(10)
標簽選擇器||偽元數(1)
通配符選擇器(0)
(ps:他們之間的進制是256)