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跨域通信