CSS選擇器及其優先級

時間 2019-11-10

原文原文鏈接

基本選擇器

標籤選擇器

標籤選擇器又叫元素選擇器，換句話說，文檔的元素就是最基本的選擇器，使用元素名稱直接選擇元素便可（如body,p,ul,ol,dl）。css

類選擇器

類選擇以點"."開頭，後面緊跟一個類名。類名不容許有空格，與元素中class屬性的值保持一致。一個元素能夠有多個class的值，每一個值經過空格分割開。類名相同的元素屬於一類元素。spa

<style>
       .first{font-size:14px;}
       .done{font-weight:bold;text-decoration:line-through;}
    </style>
    <ul>
       <li class="first done">Creat an HTML document</li>
       <li class="second done">Creat a CSS style sheet</li>
       <li class="third done">Link them all together</li>
    </ul>

ID選擇器

ID選擇器以"#"開頭，後面緊跟一個ID名，在一個文檔中，ID值不能重複，所以在選擇文檔中惟一元素的時候該選擇器比較有用。調試

<style>            
    #polite {font-family: cursive;}            
    #rude {
            font-family: monospace;      
            text-transform: uppercase;
           }
 </style>
 <p id="polite"> — "Good morning."</p>        
 <p id="rude"> — "Go away!"</p>

廣泛選擇器

使用"*"來表示廣泛選擇器，表示選擇全部元素，一般用在組合選擇器中。code

<style>            
    .left-nav > * { 
                    width:200px; 
                    background-color:#fafafa
                   }
</style>
<article class="left-nav">
    <dl>                
        <dt>推薦</dt>                
            <dd class="current"><i class="icon-music"></i>發現音樂</dd>        
    </dl>            
    <dl>                
        <dt>個人音樂</dt>                                
            <dd><i class="icon-cloud-download"></i>下載的音</dd>            
    </dl>
</article>

多選擇器

多個選擇器並列使用，使用「,」分割
例如："div,.one,#tt" 表示選擇div元素，class爲one的元素以及id爲tt的元素。orm

層次選擇器

後代選擇器

使用「」隔開兩個選擇器。例如 "ul li"表示選擇ul的後代元素li，li能夠爲ul的直接子元素，也能夠爲ul的孫子元素。文檔

子代選擇器

使用「>」隔開兩個選擇器。例如 "ul>li"表示選擇ul的直接子代元素li,ul的孫子元素li沒法被選擇到get

相鄰同胞元素

使用「+」隔開兩個選擇器。例如 ".one+*"表示選擇class爲"one"元素的下一個兄弟元素。it

通常同胞選擇器

使用「~」隔開兩個選擇器。例如 ".one~*"表示選擇class爲"one"元素的全部兄弟元素。io

屬性選擇器（配合基本選擇器進行篩選）

[attr] 選擇具備attr屬性的元素、不管該屬性的值爲何
[attr=val] 選擇具備attr屬性的、而且attr的值爲val元素
[attr~=val] 選擇具備attr屬性的、而且attr的值之一爲val的元素
[attr^=val] 選擇具備attr屬性的、而且attr的值以val開頭的元素
[attr$=val] 選擇具備attr屬性的、而且attr的值以val結尾的元素
[attr*=val] 選擇具備attr屬性的、而且attr的值包含val的元素

僞類選擇器

僞類以":"開頭，用在選擇器後，用於指明元素在某種特殊的狀態下才能被選中（配合基本選擇器進行篩選）ast

子元素:

:only-child
:first-child
:last-child
:nth-child(n) 、: nth-last-child(n)
:first-of-type、:last-of-type
:nth-of-type(n)、:nth-last-of-type(n)
......
n能夠爲元素的序號，也能夠爲特殊的字符，好比「odd」，「even