CSS中的各種選擇符介紹

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

類型，類和ID選擇器

    帶有空格的字體名稱要用''引起來
    對選擇器分組可使同一規則適用于多個選擇器，例子如下

CSS Code復制內容到剪貼板

1. th,td {   

2.     padding:0 10px 00;   

3. }  

    選項的優先級

CSS Code復制內容到剪貼板

1. h2 {   

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

3. }   

4. //先選用前者，沒有前者，再使用后者  

    類型名與類名中間不應有空格 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. //是類為planet的div元素的后代table的后代的td樣式  

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

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"]{...}  

偽類選擇器：動態事件，狀態改變

CSS Code復制內容到剪貼板

1. a:visited {   

2.     color:mangenta;   

3. }  

4. //被訪問過的鏈接

UI偽類
鏈接偽類

    Link。此時，鏈接就在那兒等著用戶點擊。
    Visited。用戶此前點擊過這個鏈接。
    Hover。鼠標指針正懸停在鏈接上。
    Active。鏈接正在被點擊（鼠標在元素上按下，還沒有釋放）。

focus偽類——鼠標放在上面

CSS Code復制內容到剪貼板

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

target偽類

CSS Code復制內容到剪貼板

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

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

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;}  

結構化偽類

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

偽元素&mdash;&mdash;似有實無的元素

    first-letter
    first-line
    before 和 after

CSS Code復制內容到剪貼板

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

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

3. //在類為age的p元素前面增加一段Age：    

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

5. //放大p的第一個字母  

繼承和層疊

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

    越后面優先級越高

    規則一：包含 ID 的選擇符勝過包含類的選擇符，包含類的選擇符勝過包含標簽名的選擇符。

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

    規則一勝過規則二。換句話說，如果選擇符更明確（特指度更高），無論它在哪里，都會勝出。

    規則三：設定的樣式勝過繼承的樣式，此時不用考慮特指度（即顯式設定優先）。下面簡單解釋一下規則三。比如下面的標記

Inheritance is weak in the Cascade

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

“CSS中的各種選擇符介紹”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！