CSS選擇器

原文地址：zclzone.com

連接僞類選擇器(a標籤)

• :link
• :visited
• :hove(最經常使用)
• :active

a: hove{
        color: red;
    }
複製代碼

---

結構僞類選擇器

• :first-child
• :last-child
• :nth-child(n):匹配其父元素的第n個子元素
• :nth-last-child(n):從最後一個子元素開始數

li:nth-child(9){}   /* 匹配第9個子元素 */
    li:nth-child(even){}   /* 匹配全部的偶數位子元素 */
    li:nth-child(odd){}   /* 匹配全部的奇數位子元素 */
    li:nth-child(2n){}   /* 匹配偶數位 */
    li:nth-child(2n+1){}   /* 匹配奇數位 */
複製代碼

---

目標僞類選擇器（:target）

<h2>目錄</h2>
<a href="#life">1我的生活</a>
<a href="#experience">2人生經歷</a>
<h3 id="life">我的生活</h3>
<h3 id="experience">人生經歷</h3>
複製代碼

:target{
    color: red;
}
複製代碼

屬性選擇器

選取標籤帶有某些特殊屬性的選擇器

選擇器	示例	含義
E[attr]	div[title]	帶有title的div
E[attr=val]	div[title=first]	帶有title="first"的div
E[attr*=val]	div[title*=first]	帶有title屬性***包含***"first"的div
E[attr^=val]	div[title^=first]	帶有title屬性以"first"***開始***的div
E[attr$=val]	div[title$=first]	帶有title屬性以"first"***結尾***的div

僞元素選擇器

示例	含義
p::first-letter	選擇p標籤內的第一個字
p::first-line	選擇p標籤內的第一行
p::selection	選擇p標籤內選中的文字
div::before	在div的內部前面插入
div::after	在div的內部後面插入