Day18 - 元素與偽類的化學反應 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2022 iThome 鐵人賽

DAY 18

自我挑戰組

從零開始的 Tailwind CSS 學習之旅系列第 18 篇

Day18 - 元素與偽類的化學反應

14th鐵人賽 tailwindcss

肉鬆

2022-10-01 13:26:44

646 瀏覽

分享至

偽類

以一個冒號 ： 作為前綴詞宣告使用，後面接偽類名稱。

:hover

藉由 hover: 滑鼠停留在元素時變更樣式，舉個例子：

<div class="flex gap-x-4">
  <button type="button" class="... bg-purple-500">按鈕</button>
  <button type="button" class="... bg-purple-500 hover:bg-purple-700">hover 效果按鈕</button>
</div>

.hover\:bg-purple-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(126 34 206 / var(--tw-bg-opacity));
}

:focus

藉由 focus: 滑鼠焦點在元素時變更樣式，舉個例子：

<div class="flex gap-x-4">
  <button type="button" class="... bg-purple-500">按鈕</button>
  <button type="button" class="... bg-purple-500 focus:ring focus:ring-purple-300">foucs 效果按鈕</button>
</div>

.focus\:ring:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-red-300:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(252 165 165 / var(--tw-ring-opacity));
}

:active

藉由 active: 滑鼠在元素上活動時變更樣式，舉個例子：

<div class="flex gap-x-4">
  <button type="button" class="... bg-purple-500">按鈕</button>
  <button type="button" class="... bg-purple-500 active:bg-red-500">hover 效果按鈕</button>
</div>

.active\:bg-red-500:active {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}

:first

藉由 first: 為第一個子元素設定樣式，舉個例子：

<ul class="flex gap-x-4">
<li class="... bg-blue-700 first:bg-purple-700">1</li>
<li class="... bg-blue-700 first:bg-purple-700">2</li>
<li class="... bg-blue-700 first:bg-purple-700">3</li>
</ul>

.first\:bg-purple-700:first-child {
  --tw-bg-opacity: 1;
  background-color: rgb(126 34 206 / var(--tw-bg-opacity));
}

:last

藉由 last: 為最後一個子元素設定樣式，舉個例子：

<ul class="flex gap-x-4">
  <li class="... bg-blue-700 last:bg-purple-700">1</li>
  <li class="... bg-blue-700 last:bg-purple-700">2</li>
  <li class="... bg-blue-700 last:bg-purple-700">3</li>
</ul>

.last\:bg-purple-700:last-child {
  --tw-bg-opacity: 1;
  background-color: rgb(126 34 206 / var(--tw-bg-opacity));
}

:odd

藉由 odd: 為奇數（1、3、5 …）子元素設定樣式，舉個例子：

<table class="...">
  <thead>
    <tr class="...">
      <th class="...">姓名</th>
      <th class="...">屬性</th>
      <th class="...">絕招</th>
    </tr>
  </thead>
  <tbody>
    <tr class="odd:bg-gray-300">
      <td class="...">傑尼龜</td>
      <td class="...">水</td>
      <td class="...">小水槍</td>
    </tr>
    <tr class="odd:bg-gray-700">
      <td class="...">小火龍</td>
      <td class="...">火</td>
      <td class="...">噴射火焰</td>
    </tr>
    <tr class="odd:bg-gray-300">
      <td class="...">皮卡丘</td>
      <td class="...">雷</td>
      <td class="...">十萬伏特</td>
    </t>
  </tbody>
</table>

.odd\:bg-gray-300:nth-child(odd) {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
}

:even

藉由 even: 為偶數（2、4、6 …）子元素設定樣式，舉個例子：

<table class="...">
  <thead>
    <tr class="...">
      <th class="...">姓名</th>
      <th class="...">屬性</th>
      <th class="...">絕招</th>
    </tr>
  </thead>
  <tbody>
    <tr class="even:bg-gray-300">
      <td class="...">傑尼龜</td>
      <td class="...">水</td>
      <td class="...">小水槍</td>
    </tr>
    <tr class="even:bg-gray-300">
      <td class="...">小火龍</td>
      <td class="...">火</td>
      <td class="...">噴射火焰</td>
    </tr>
    <tr class="even:bg-gray-300">
      <td class="...">皮卡丘</td>
      <td class="...">雷</td>
      <td class="...">十萬伏特</td>
    </t>
  </tbody>
</table>

.even\:bg-gray-300:nth-child(even) {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
}

:disabled

藉由 disabled 使用修飾符禁用輸入時的樣式，舉個例子：

<div>
  <label for="name" class="...">姓名</label>
  <input type="text" id="name" value="傑尼龜" disabled class="... disabled:bg-gray-300">
</div>

.disabled\:bg-gray-300:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
}

:invalid

藉由 invalid 當輸入無效時使用修飾符設定輸入樣式，舉個例子：

<div>
  <label for="email" class="...">信箱</label>
  <input type="email" id="email" class="... invalid:border-red-500">
</div>

.invalid\:border-red-500:invalid {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity));
}

:required

藉由 required 在必要時使用修飾符設定輸入樣式，舉個例子：

<div>
  <label for="address" class="...">地址</label>
  <input type="text" id="address" required class="... required:border-red-500">
</div>

.required\:border-red-500:required {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity));
}

基於父狀態樣式（group）

當需要根據某個父元素狀態設定元素樣式時，父元素使用 group，並搭配要設定目標的元素使用 group-hover 來設定樣式，舉個例子：

<a href="javascript:;" class="... group">
  <img src="..." alt="..." class="... group-hover:scale-110">
</a>

從上方可以看到 a 標籤有 group，img 標籤有 group-hover:scale-110，當滑鼠移動到這個 a 標籤時，會觸發裡面的 group-hover ，圖片就會放大，a 標籤為 img 標籤的父元素。
特別注意：使用 group-hover 一定要搭配 group 才有效果，此模式也適用 group-focus、group-active 等。