上次有提到一些基本的用法，由於選擇器的種類繁多，偽類選擇器的使用方法比起基本和組合選擇器也比較複雜一點，所以另外拉一個篇幅做紀錄下來
※本文會陸續新增，當我有使用上，或是有疑問留言時，會在更新
參考連結：CSS Selectors第一章，CSS選擇器的基本介紹，正確的將CSS套用到你的原件上
內容目錄
偽類選擇器(Pseudo-class selectors)
這類的選擇方式，是比較特殊的動作，有些是使用者動作，有些是從本身結構，行為去選擇，例如當滑鼠在元素上頭時、找到所有兄弟的第一個、當元素獲得焦點時…等
語法是：標籤後增加”：”
由於很多並不常用，這裡舉幾個比較常用的例子
:hover
這個選擇器用於將滑鼠停在某個元素上面，即可以對這個行為作出反應，例如：滑鼠停在連結上，滑鼠停在某個區塊上
範例:
首先我們設定有兩個元素在上面，分別有一個div跟一個p夾著a連結
div：
- 高跟寬100px
- 外框黑，背景粉
- class設定text1
- a連結：
- class設定text2
HTML
<div class=”text1″>
我是text1
</div>
<p><a class=”text2″ href=”#”>我是text2</a></p>
CSS
.text1 {
display: inline-block;
height: 100px;
width: 100px;
border: 1px solid black;
background: pink;
}
.text1:hover {
height: 200px;
width: 200px;
border: 1px solid black;
background: green;
}
a.text2:hover {
color: black;
font-size: 100px;
}
程式執行結果
分別設定他們被滑鼠選到後：
div：
- 高跟寬200px
- 背景變成綠色
a連結：
- 放大100px
- 字體改為黑色
:first-child
被選到的元素中，第一個子元素，這個意思是，當你選取很多重複命名的元素，這些元素排序最上面，也就是第一個會被執行設定的CSS語法
範例:
這裡設定三行text-p的元素，同時選取起來看結果
第二段設定每行p都有兩個span元素
HTML
<p class=”text-p”>我是第一個P元素</p>
<p class=”text-p”>我是第二個P元素</p>
<p class=”text-p”>我是第三個P元素</p>
<p>我<span class=”text-span”>是第四個</span> <span class=”text-span”>P元素</span></p>
<p>我是<span class=”text-span”>第五個</span><span class=”text-span”>P元素</span></p>
<p>我是第<span class=”text-span”>六個</span><span class=”text-span”>P元素</span></p>
CSS
.text-p:first-child {
color: red;
font-size: 50px;
}
p .text-span:first-child {
color: blue;
font-size: 20px;
}
程式執行結果
我們從結果看出，text-p的三行當中，只有第一行會被選取，因為加入了:first-child，所以只有第一行變紅色放大
而第二段的則是每一行加入了span，由於我的語法解讀為，我選取的每個P，他們的第一個span得設定CSS，所以只有一行中的第一個被包住的span文字變色放大了
我是第一個P元素
我是第二個P元素
我是第三個P元素
我是第四個 P元素
我是第五個P元素
我是第六個P元素
:lang
這是用於設定不同語言的特殊規則
範例：
設定兩段文字，中間夾q標籤
HTML
<p>這是第一段 <q lang=”abc”>的範例</q> ，用於測試用</p>
<p>這是第二段 <q lang=”def”>的範例</q> ，用於測試用</p>
CSS
q:lang(def) {
quotes: “~~~””~~~”;
}
程式執行結果
這個結果是lang根據設定的文字去追蹤，將雙引號改變成我們需要的符號
