偽類

偽類是由一個冒號 : 作為前綴詞宣告，緊接著是偽類的名稱，例如 :hover、:focus、:first-child、:disabled 等等。

而 Master CSS 能夠讓我們直接在元素上面應用 CSS 偽類，下面介紹幾種常用的偽類給大家。

:hover

:hover 語法表示元素 hover 時的狀態，bg:#f8f8fa:hover 代表元素在 hover 的時候套用 bg:#f8f8fa 屬性。

<button class="... bg:#f8f8fa:hover">
  Submit
</button>

.bg\:\#f8f8fa\:hover:hover {
  background-color: rgb(248, 248, 250);
}

:focus

:focus 語法表示元素 focus 時的狀態，b:#f8f8fa:focus 代表元素在 focus 的時候套用 b:#f8f8fa 屬性。

<input class="... b:#f8f8fa:focus" type="text" placeholder="Name" />

.b\:\#f8f8fa\:focus:focus {
  border-color: rgb(248, 248, 250);
}

:first

:first 語法表示第一個子物件，bg:#f8f8fa:first 代表第一個子物件套用 bg:#f8f8fa 屬性。

<ul>
  <li class="... bg:#f8f8fa:first">
    <h2>Dressing Table</h2>
  </li>
  <li class="... bg:#f8f8fa:first">
    <h2>Double Bed</h2>
  </li>
  <li class="... bg:#f8f8fa:first">
    <h2>Sofa</h2>
  </li>
  <li class="... bg:#f8f8fa:first">
    <h2>Cabinet</h2>
  </li>
  <li class="... bg:#f8f8fa:first">
    <h2>Desk</h2>
  </li>
  <li class="... bg:#f8f8fa:first">
    <h2>Mirror</h2>
  </li>
</ul>

.bg\:\#f8f8fa\:first:first-child {
  background-color: rgb(248, 248, 250);
}

:last

:last 語法表示最後一個子物件，bg:#f8f8fa:last 代表最後一個子物件套用 bg:#f8f8fa 屬性。

<ul>
  <li class="... bg:#f8f8fa:last">
    <h2>Dressing Table</h2>
  </li>
  <li class="... bg:#f8f8fa:last">
    <h2>Double Bed</h2>
  </li>
  <li class="... bg:#f8f8fa:last">
    <h2>Sofa</h2>
  </li>
  <li class="... bg:#f8f8fa:last">
    <h2>Cabinet</h2>
  </li>
  <li class="... bg:#f8f8fa:last">
    <h2>Desk</h2>
  </li>
  <li class="... bg:#f8f8fa:last">
    <h2>Mirror</h2>
  </li>
</ul>

.bg\:\#f8f8fa\:last:last-child {
  background-color: rgb(248, 248, 250);
}

:odd

:odd 語法表示奇數個子物件（1、3、5 …），bg:#f8f8fa:odd 代表第奇數個子物件套用 bg:#f8f8fa 屬性。

<ul>
  <li class="... bg:#f8f8fa:odd">
    <h2>Dressing Table</h2>
  </li>
  <li class="... bg:#f8f8fa:odd">
    <h2>Double Bed</h2>
  </li>
  <li class="... bg:#f8f8fa:odd">
    <h2>Sofa</h2>
  </li>
  <li class="... bg:#f8f8fa:odd">
    <h2>Cabinet</h2>
  </li>
  <li class="... bg:#f8f8fa:odd">
    <h2>Desk</h2>
  </li>
  <li class="... bg:#f8f8fa:odd">
    <h2>Mirror</h2>
  </li>
</ul>

.bg\:\#f8f8fa\:odd:nth-child(2n+1) {
  background-color: rgb(248, 248, 250);
}

:even

:even 語法表示偶數個子物件（2、4、6 …），bg:#f8f8fa:even 代表第偶數個子物件套用 bg:#f8f8fa 屬性。

<ul>
  <li class="... bg:#f8f8fa:even">
    <h2>Dressing Table</h2>
  </li>
  <li class="... bg:#f8f8fa:even">
    <h2>Double Bed</h2>
  </li>
  <li class="... bg:#f8f8fa:even">
    <h2>Sofa</h2>
  </li>
  <li class="... bg:#f8f8fa:even">
    <h2>Cabinet</h2>
  </li>
  <li class="... bg:#f8f8fa:even">
    <h2>Desk</h2>
  </li>
  <li class="... bg:#f8f8fa:even">
    <h2>Mirror</h2>
  </li>
</ul>

.bg\:\#f8f8fa\:even:nth-child(2n) {
  background-color: rgb(248, 248, 250);
}

:nth(N)

:nth(N) 語法表示第 N 個子物件，bg:#f8f8fa:nth(4) 代表第四個子物件套用 bg:#f8f8fa 屬性。

<ul>
  <li class="... bg:#f8f8fa:nth(4)">
    <h2>Dressing Table</h2>
  </li>
  <li class="... bg:#f8f8fa:nth(4)">
    <h2>Double Bed</h2>
  </li>
  <li class="... bg:#f8f8fa:nth(4)">
    <h2>Sofa</h2>
  </li>
  <li class="... bg:#f8f8fa:nth(4)">
    <h2>Cabinet</h2>
  </li>
  <li class="... bg:#f8f8fa:nth(4)">
    <h2>Desk</h2>
  </li>
  <li class="... bg:#f8f8fa:nth(4)">
    <h2>Mirror</h2>
  </li>
</ul>

.bg\:\#f8f8fa\:nth\(4\):nth-child(4) {
  background-color: rgb(248, 248, 250);
}

:disabled

:disabled 語法表示禁用時的樣式，opacity:.5:disabled 代表元素在禁用狀態時套用 opacity:.5 屬性。

<input class="... opacity:.5:disabled" type="text" placeholder="姓名" disabled>

.opacity\:\.5\:disabled:disabled {
  opacity: 0.5;
}

:invalid

:invalid 語法表示無效或格式錯誤時的樣式，b:red:invalid 代表元素在無效或格式錯誤時套用 b:red 屬性。

<input class="... b:red:invalid" type="email" placeholder="E-mail">

.b\:red\:invalid:invalid {
  border-color: rgb(209, 26, 30);
}

:required

:required 語法表示必填時的樣式，b:green:required 代表元素為必填時套用 b:green 屬性。

<input class="... b:green:required" type="email" placeholder="E-mail" required>

.b\:green\:required:required {
  border-color: rgb(6, 123, 52);
}

總結

本日 codepen 連結

Master CSS 提供了一系列的偽類語法，使開發者能夠在 HTML 元素上直接應用 :hover、:focus 等常用偽類，並且語法與原生 CSS 十分類似，因此只要是熟悉 CSS 的開發者，就能快速地上手 Master CSS。

參考

• Master CSS 官網 - 偽類