CSS選擇器有哪些?選擇器的優先級如何排序?


CSS選擇器分類:

  CSS的選擇器分類可以分為三大類:id選擇器,類選擇器,標簽選擇器。

用法如下:

選擇器   e.g. 說明
id選擇器 #id #header 選擇id="header"的所有元素
類選擇器 .class .message

選擇class="message"的所有元素

標簽選擇器 el div 選擇所有的div元素

 

 

 

 

 

 

其中他們又可以以不同的方式進行組合,如下:

選擇器   e.g. 說明
后代選擇器 el el div p 選擇div元素內部的所有p元素
子代選擇器 el>el div>p 選擇div元素的第一子代的所有p元素
相鄰兄弟選擇器 el+el .msg+p 選擇與class為"msg"的元素同級且緊跟其后的第一個p元素
通用兄弟選擇器 el~el .msg~p 選擇class為"msg"的元素后面的所有p元素
群組選擇器 el,el p, span, .blue,#box 選擇所有的p元素、span元素、class為"blue"的元素以及id為"box"的元素
偽類選擇器

:link

:visited

:hover

:active

:focus

a:hover 選擇鼠標指針位於a標簽之上的鏈接
偽元素選擇器

:before

:after

p:before 在每個p元素內容之前插入內容
屬性選擇器 [attribute]      [target] 選擇帶有target屬性的所有元素
通用選擇器 * * 選擇所有的元素

 

 

 

 

 

 

 

 

 

 

 

 

 

 

   
                                                        

 

 

 

 

 

優先級:!important > 內聯樣式 > id選擇器 > 類、偽類、屬性選擇器 > 標簽、偽元素選擇器

權   重:   !important:10000

     內聯: 1000

     id選擇器:100

     類、偽類、屬性選擇器:10

     標簽、偽元素選擇器:1

     通用選擇器(*)、子選擇器(>)、相鄰兄弟選擇器(+)、通用兄弟選擇器(~)權重值為0 

 


免責聲明!

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



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