幾種基礎的css選擇器,以及他們之間的權重(優先級)


-------------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)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM