CSS3之選擇器與僞類、僞元素

CSS3現狀

CSS3是從CSS2發展過來的，在原有的基礎上有了很大的性能提高和功能增長，但CSS3瀏覽器支持程度差，兼容性很差，有時須要添加私有前綴。CSS3對移動端的支持優於PC端，現在CSS3應用仍是至關普遍的。對於CSS3，咱們應該堅持漸進加強的原則，也就是保證低版本瀏覽器可以支持，高版本瀏覽器可以擁有最好的用戶體驗。

屬性選擇器

標誌性符號：[]

E[title] ：選中頁面的元素E，而且E帶有title屬性

---

E[title=」abc]：選中title屬性值爲abc的E元素

---

E[title^=」abc」]：選中title屬性值以abc開頭的E元素

---

E[title$=」abc」]：選中title屬性值以abc結尾的E元素

---

E[title*=」abc」]：選中title屬性值包含abc的E元素

僞類選擇器

標誌性符號： ：

通常僞類

:hover 鼠標放在上面狀態
:link 默認狀態
:active 點擊時狀態
:visited 點擊事後的狀態

結構僞類

經過結構來篩選

E:first-child{} ：選中全部E元素的第一個元素
E:last-child{} ：選中全部E元素的最後一個元素
E:nth-child(n){} ：選中全部E元素的第n個元素，n是具體的值，如不是，則選中全部的元素
E:nth-child(odd/even){} ：選中全部E元素的第奇數/偶數個元素
E:nth-child(2n){} ：選中全部E元素的偶數個元素
E:nth-child(2n+1){} ：選中全部E元素的奇數個元素
E:nth-child(n){} ：選中全部E元素的全部元素
E:nth-child(-n+5){} ：選中全部E元素的前5個元素，5這個值能夠改
E:nth-last-child(-n+5){} ：選中全部E元素的後5個元素，5這個值能夠改
E:nth-last-child(n){} ：選中全部E元素的從最後倒數第n個元素，n是具體的值，如不是，則選中全部的元素

empty僞類

若是選中元素爲空，則會使用，不能有標籤和文本，連空格都不行

使用方法：：empty{}

target僞類（目標僞類）

須要配合錨點使用，表示元素被激活的狀態

僞元素

標誌性符號：::

常見僞元素：

::before
::after

僞元素顧名思義就是一個假的元素，其必須有content屬性，並且必須有值，通常爲「.」,產生的元素至關於div標籤

僞元素選擇器

::first-letter 選中第一個字母 ::first:line 選中第一行 ::selection 可改變選中文本的樣式