---

theme: condensed-night-purple highlight: atelier-dune-light

---

持續創作，加速成長！這是我參與「掘金日新計劃 · 10 月更文挑戰」的第11天，點擊查看活動詳情

前情提要

為了豐富自己是知識體系，我最近頻繁翻閲MDN的文檔，果然MDN文檔常看常新。

最近翻到CSS部分，然後打開了偽類這一欄，好傢伙，快60個了（包括實驗中的）。

跳過常用的，還是很多。分批分期研究的話，我想三期應該是能夠收官。

今天收官第三篇：《原來偽類也可組CP》。這篇比較有意思的是，接下來要講的偽類基本都是「CP組合」。

偽類們

:disabled和:enabled

:disabled偽類選擇器用來指定當元素處於不可用狀態時的樣式。

:enabled偽類選擇器用來指定當元素處於可用狀態時的樣式。

當一個表單中的元素經常在可用狀態與不可以狀態之間進行切換時，通常會將:disabled偽類選擇器和:enabled偽類選擇器結合使用。

實例：:disabled和:enabled結合使用

• 輸入框元素可用狀態設置背景是藍色；
• 輸入框元素不可用狀態設置背景是紅色。

input[type='text']:disabled { background: red; } input[type='text']:enabled { background: blue; } ...... <input type="text" name="text" value="可用" /> <input type="text" name="text" value="不可用" disabled />

展示效果

| | | ------------------------------------------------------------------------------------------------------------- |

:read-only和:read-write

:read-only偽類選擇器用來指定當元素處於只讀狀態時的樣式。

:read-write偽類選擇器用來指定當元素處於非只讀狀態時的樣式。

當一個表單中的元素經常在可編輯與不可編輯之間進行切換時，通常會將:read-only偽類選擇器和:read-write偽類選擇器結合使用。

另外這兩個選擇器不限於input元素:

:read-only也會選擇所有的不能被編輯的元素。

:read-write也會選擇所有可以被編輯的元素，例如設置了contenteditable屬性的 p元素。

實例：:read-only和:read-write結合使用

• 輸入框元素和p元素可讀寫狀態設置背景是藍色；
• 輸入框元素和p元素只讀狀態設置背景是紅色。

``` input[type='text']:read-only, p:read-only { background: red; } input[type='text']:read-write, p:read-write { background: blue; } ......

p元素當前內容可編輯

p元素當前內容不可編輯

```

展示效果

| | | ------------------------------------------------------------------------------------------------------------- |

:required和:optional

:required偽類選擇器用來指定，允許使用required屬性且已經指定了required屬性的input元素、select元素以及textarea元素的樣式。

:optional偽類選擇器用來指定，允許使用required屬性且未指定了required屬性的input元素、select元素以及textarea元素的樣式。

:optional偽類選擇幫助表單容易的展示可選字段並且渲染其外觀。

實例：:required和:optional結合使用

• 指定了必填屬性(required)的輸入框元素設置背景是藍色；
• 未指定必填屬性(required)的輸入框元素設置背景是紅色。

input[type='text']:required { background: red; } input[type='text']:optional { background: blue; } ...... <input type="text" name="text" value="非必須" /> <input type="text" name="text" value="必須" required />

展示效果

| | | ------------------------------------------------------------------------------------------------------------- |

未完待續

第三集的偽類分享就到這裏了，這期主要介紹了:disabled和:enabled、:read-only和:read-write、:required和:optional，這幾個組合使用更佳。

最大的收穫就是，CSS能玩出花的技能又增加了。

我喜歡創作，每一幅作品都是我將想象用一隻叫做“代碼”的畫筆，繪製而成。

當我尋找新的技術的時候，不是創意枯竭，而是我需要新的色彩。

而這個循序漸進的學習過程，雖然緩慢，但是積少成多、聚沙成塔。