如何理解CSS中的UI偽類

如何理解CSS中的UI偽類，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

偽類（Pseudo classes）是選擇符的螺栓，用來指定一個或者與其相關的選擇符的狀態。它們的形式是 selector:pseudo class { property: value; }，簡單地用一個半角英文冒號（:）來隔開選擇符和偽類。

偽類可以分為兩種：

    UI（ User Interface，用戶界面）偽類會在 HTML 元素處于某個狀態時（比如鼠標
    指針位于鏈接上），為該元素應用 CSS 樣式。

    結構化偽類會在標記中存在某種結構上的關系時（如某個元素是一組元素中的第
    一個或最后一個），為相應元素應用 CSS 樣式。

UI偽類
鏈接偽類

針對鏈接的偽類一共有4個，因為鏈接始終會處于如下4種狀態之一。

    Link
    Visited
    Hover
    Active

    提示：由于這4個偽類的特指度相同，如果不按照這里列出的順序使用它們，瀏覽器可能不會顯示預期效果。方便記憶：LoVe? HA! 大寫字母就是每個偽類的頭一個字母。

    提示：一個冒號（ : ）表示偽類，兩個冒號（ :: ）表示 CSS3 新增的偽元素。

focus偽類

表單中的文本字段在用戶單擊它時會獲得焦點，然后用戶才能在其中輸入字符。
例如：input:focus {border:1px solid blue;}
上面一行代碼會在光標位于 input 字段中時，為該字段添加一個藍色邊框。這樣可以讓用戶明確地知道輸入的字符會出現在哪里。
target偽類

如果用戶點擊一個指向頁面中其他元素的鏈接，則那個元素就是目標（ target），可以
用:target 偽類選中它。
例如：對于這個鏈接：<a href="#more_info">More Information</a>
位于頁面的其它地方、ID 為 more_info 的那個元素就是目標。
假設該元素為這樣：<h3 id="more_info">This is the information you are looking for.</h3>
那么，CSS規則：#more_info:target {background:#eee}
會在用戶單擊鏈接轉向 ID 為 more_info 的元素時，為該元素添加灰色背景。

    維基百科在其引證中大量使用了:target 偽類。維基百科的引證鏈接就是正文里那些
    不起眼的數字鏈接。引證本身則位于長長的頁面的最下方。如果沒有:target 應用的
    突出顯示，很難知道你點擊的鏈接對應著一大堆引證中的哪一個。

結構化偽類

結構化偽類可以根據標記的結構應用樣式，比如根據某元素的父元素或前面的同胞元素是什么。
first-child和:last-child

格式：

CSS Code復制內容到剪貼板

1. e:first-child   

2. e:last-child  

示例：

CSS Code復制內容到剪貼板

1. ol.results li:first-child {color:blue;}   

2. nth-child  

格式：

CSS Code復制內容到剪貼板

1. e:nth-child(n)  

示例：

CSS Code復制內容到剪貼板

1. li:nth-child(3)  

說明：e 表示元素名，n 表示一個數值（也可以使用 odd 或 even）

看完上述內容，你們掌握如何理解CSS中的UI偽類的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！