CSS中的各種選擇符介紹

本篇內容介紹了“CSS中的各種選擇符介紹”的有關(guān)知識，在實(shí)際案例的操作過(guò)程中，不少人都會(huì )遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學(xué)有所成！

類(lèi)型，類(lèi)和ID選擇器

    帶有空格的字體名稱(chēng)要用''引起來(lái)
    對選擇器分組可使同一規則適用于多個(gè)選擇器，例子如下

CSS Code復制內容到剪貼板

1. th,td {   

2.     padding:0 10px 00;   

3. }  

    選項的優(yōu)先級

CSS Code復制內容到剪貼板

1. h2 {   

2.     font-family:'Times New Roman',serif;   

3. }   

4. //先選用前者，沒(méi)有前者，再使用后者  

    類(lèi)型名與類(lèi)名中間不應有空格 div.btn-success
    通用選擇器*，適用于文檔所有元素

CSS Code復制內容到剪貼板

1. * {   

2.     font-family:Arial;   

3. }  

    后代選擇器

CSS Code復制內容到剪貼板

1. div.planet table td {   

2.     padding:0 10px 0 0;   

3. }   

4. //是類(lèi)為planet的div元素的后代table的后代的td樣式  

    萬(wàn)萬(wàn)牢記，上下文選擇符以空格作為分隔符，而分組選擇符則以逗號作為分隔符，不要弄混。
    子選擇符>

CSS Code復制內容到剪貼板

1. section > p{   

2.     font-style:Italic;   

3. }   

4. //section的子元素p  

    同胞選擇符～和+

section ~ p {
    font-style:Italic;
}
//p在section后面就行
section + p {font-style:Italic;}
//p必須緊跟section

    非子選擇符

CSS Code復制內容到剪貼板

1. selection * a {   

2.     ***;   

3. }   

4. //所有是selection元素孫子的a元素  

    ID選擇器

屬性選擇器

    標簽名[屬性="屬性值"]

CSS Code復制內容到剪貼板

1. img[title="hh jj"]{...}  

偽類(lèi)選擇器：動(dòng)態(tài)事件，狀態(tài)改變

CSS Code復制內容到剪貼板

1. a:visited {   

2.     color:mangenta;   

3. }  

4. //被訪(fǎng)問(wèn)過(guò)的鏈接

UI偽類(lèi)
鏈接偽類(lèi)

    Link。此時(shí)，鏈接就在那兒等著(zhù)用戶(hù)點(diǎn)擊。
    Visited。用戶(hù)此前點(diǎn)擊過(guò)這個(gè)鏈接。
    Hover。鼠標指針正懸停在鏈接上。
    Active。鏈接正在被點(diǎn)擊（鼠標在元素上按下，還沒(méi)有釋放）。

focus偽類(lèi)——鼠標放在上面

CSS Code復制內容到剪貼板

1. input:focus {border:1px solid blue;}  

target偽類(lèi)

CSS Code復制內容到剪貼板

1. <a href="#more_info">More Information</a>     

2. //位于頁(yè)面其他地方、ID 為 more_info 的那個(gè)元素就是目標。該元素可能是這樣的：   

3.   

4.   

5. <h3 id="more_info">This is the information you are looking for.</h3>   

6.   

7.   

8. //那么，如下 CSS 規則   

9. #more_info:target {background:#eee;}  

結構化偽類(lèi)

    first-child 一組同胞元素的第一個(gè)
    last-child
    nth-child(3) 一組同胞元素的第三個(gè)

偽元素&mdash;&mdash;似有實(shí)無(wú)的元素

    first-letter
    first-line
    before 和 after

CSS Code復制內容到剪貼板

1. p.age::before {content:"Age: ";}   

2. p.age::after {content:" years.";}   

3. //在類(lèi)為age的p元素前面增加一段Age：    

4. p::first-letter {font-size:300%;}   

5. //放大p的第一個(gè)字母  

繼承和層疊

    瀏覽器默認樣式表
    用戶(hù)樣式表
    作者鏈接樣式表（按照它們鏈接到頁(yè)面的先后順序）
    作者嵌入樣式
    作者行內樣式

    越后面優(yōu)先級越高

    規則一：包含 ID 的選擇符勝過(guò)包含類(lèi)的選擇符，包含類(lèi)的選擇符勝過(guò)包含標簽名的選擇符。

    規則二：如果幾個(gè)不同來(lái)源都為同一個(gè)標簽的同一個(gè)屬性定義了樣式，行內樣式勝過(guò)嵌入樣式，嵌入樣式勝過(guò)鏈接樣式。在鏈接的樣式表中，具有相同特指度的樣式，后聲明的勝過(guò)先聲明的。

    規則一勝過(guò)規則二。換句話(huà)說(shuō)，如果選擇符更明確（特指度更高），無(wú)論它在哪里，都會(huì )勝出。

    規則三：設定的樣式勝過(guò)繼承的樣式，此時(shí)不用考慮特指度（即顯式設定優(yōu)先）。下面簡(jiǎn)單解釋一下規則三。比如下面的標記

Inheritance is weak in the Cascade

和下面的規則
div#cascade_demo p#inheritance_fact {color:blue;}
2 - 0 - 2（高特指度）
會(huì )導致單詞“weak”變成藍色，因為它從父元素 p 那里繼承了這個(gè)顏色值。
但是，只要我們再給 em 添加一條規則
em {color:red;}
0 - 0 - 1 （低特指度）
em 就會(huì )變成紅色。因為，雖然它的特指度低（0-0-1），但 em 繼承的顏色值，會(huì )被為它明確（顯式）指定的顏色值覆蓋，就算（隱式）遺傳該顏色值的規則的特指度高（2-0-2）也沒(méi)有用。