安安，今天來講點偽類選擇器，之前的Jquery裡面與前幾日文章有寫了一小部分，不過希望能把一些集中統整下來～
這次資源是閱讀金魚選擇器所筆記的，自己筆記寫的部分為未來比較有機會出現的選擇器，有省略過一些，有興趣的可以再去翻翻看這本書:)在新手時期算是幫助了不少～

偽類選擇器？ 由單一個「：」作為開頭，接著偽類選取器的名稱，如:hover、:active

偽類的子分類。

注意：優先權與class相同歐！

▶超連結動態

a:hover（當滑鼠滑動到上面）

a:active點擊當下

a:focus取得焦點

a:visited點擊過後

▶表單狀態選選器 :checked

當表單被勾選的狀態，可應用情境：手機網頁的選單、清單開關、清單選取效果等等。

下面範例為，可讓checkbox被勾選時變大：

<input type="checkbox" class="checkbox" id="box1">
<label for="box1">ＡＡＡＡＡ</label>

#box1:checked{
  transform: scale(2);
}

▶首字選取器 :first-letter

字面上的意思來說就是首字（啊喂有講跟沒講一樣

▶空值選取器 :empty

專門選取內容是空的物件（完全的沒有內容）

:empty{
.....}

div:empty{
....}

▶否定選取器:not()

選取條件內以外的

<form>
  <input type="text">
  <input type="button">
  <input type="submit">
</form>

當text與button都沒有class但想選取他們的時候可以利用:not()

//要選取的物件:不要選取到的(排除條件){....}
input:not([type="submit"]){ ..... }

▶:first-child & :last-child（重點在順序）

:first-child 選第一個子物件

:last-child 選最後一個子物件

<div class="group">
  <h1>A</h1>
  <h2>B</h2>
  <h3>C</h3>
  <h2>B</h2>
  <h3>C</h3>
</div>

.group h2:first-child{
  color: red;
}

可以想想看這會不會讓.group裡第一個h2文字變顏色？

答案是不會！

why? why? why?

因為:first-child是選取第一個子物件，在.group的第一個子物件是h1，接著往下看，h2是第二個子物件非第一個，所以會抓取失敗。（之前新手時期常想說為何沒效果，才知道原因是這樣）

所以，改成下面這個程式碼才會產生作用：

記得左側要有空格，代表為了要選取.group裡面的第一個子物件。

.group :first-child{
  color: red;
}

▶:first-of-type & :last-of-type（先看分類再看順序）

選取"同類"元素中的第一個物件與最後一個物件。

那與:first-child & :last-child 不同之處？

first-child & :last-child 不管分類只管"順序"

承剛剛上述的html，如果我想選取h2裡面的第一個變成紅色字，就能使用下列：

.group h2:first-of-type{
  color: red;
}

意思是，:first-of-type為我要選取分類為h2類型，裡面第一個物件。

＊但萬一沒有指定類型會怎樣呢？

.group :first-of-type{
  color: red;
}

結果會發現前三個物件都被選取到，沒指定分類情況下，瀏覽器會把每一個類型元素的第一個選起來了。

▶獨子選取器:only-child

單純只看數量的一個選取器。

▶類型獨子選取器:only-of-type

選取唯一一個該類型的物件，一個區塊內有一個div與一個p的話，會被同時選；一個區塊內有兩個div與一個p的話，只會選到一個的p。

那明天會再寫關於剩下的偽類選擇器唷！
敬請期待:P