CSS偽類的第三集,原來偽類也可組CP
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能玩出花的技能又增加了。
我喜歡創作,每一幅作品都是我將想象用一隻叫做“程式碼”的畫筆,繪製而成。
當我尋找新的技術的時候,不是創意枯竭,而是我需要新的色彩。
而這個循序漸進的學習過程,雖然緩慢,但是積少成多、聚沙成塔。
- await-to-js 原始碼分析,體驗一把捕獲異常的優雅
- CSS偽類的第三集,原來偽類也可組CP
- 從:is()說起,開啟CSS偽類第二集
- 一組純CSS開發的聊天背景圖,幫助避免發錯訊息的尷尬
- 「CSS特效」我的發呆專屬,反覆解鎖手機螢幕
- 「技術分享」以Antd為例,快速打通UI元件開發的任督二脈
- 「功能實現」我封裝了一個表單元件,感覺離財富自由又近了一步
- 「經驗總結」高效開發,老程式碼可以這樣動
- 前端開發提效小技巧之業務功能篇
- 人生有忙忙碌碌,也有詩和遠方 | 2022年中總結
- 【端午節】新奇體驗,我用react實現網頁遊戲的全過程(包括規則設計)
- 【暑假記憶】消暑神器,我用CSS復刻了一個遊戲機
- 突圍?我願稱之為向上的攀登者
- 【孟夏之遇】望孟夏之短夜兮,螢星相伴
- 【技術學習】SVG-邊學邊做
- 【TS實踐】自己動手豐衣足食的TS專案開發
- 【碼上掘金】通過FileReader讀取Excel檔案內容
- 【Taro開發】四月芳菲,Taro觀賞指南
- 【Node.js】青梅煮酒,聊聊zlib壓縮
- 【知識點】關於iframe跨域通訊