CSS3 :default伪类选择器使用简介


Posted in HTML / CSS onMarch 15, 2018

一、CSS3 :default伪类选择器简介

CSS3 :default 伪类选择器只能作用在表单元素上,表示默认状态的表单元素。

举个例子,一个下拉框,可能有多个选项,我们默认会让某个 <option> 处于 selected 状态,此时这个 <option> 可以看成是处于默认状态的表单元素(例如下面示意代码的“选项4”),理论上可以应用 :default 伪类选择器。

<select multiple>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    <option selected>选项4</option>
    <option>选项5</option>
    <option>选项6</option>
</select>

假设CSS如下:

option:default {
    color: red;
}

则在Chrome浏览器下,当我们选择其他选项,此时就可以看到选项4是红色了,效果如下图:

CSS3 :default伪类选择器使用简介 

Firefox浏览器下效果也是类似:

CSS3 :default伪类选择器使用简介 

IE浏览器则不支持。

因此,移动端可以放心使用,桌面端不用管IE的项目也可以用起来。

二、CSS3 :default伪类选择器作用

CSS3 :default 伪类选择器作用设计的作用是让用户在选择一组数据的时候,依然知道默认选项是什么,否则其他选项一多,选着选着就不知道默认提供的是哪个了,算是一种体验增强策略。作用不是很强烈,但是关键时刻却很有用。

三、CSS3 :default伪类选择器一些特性研究

1. 研究1:JS快速修改会不会有影响?

测试代码如下:

:default {
  transform: sclae(1.5);
}
<input type="radio" name="city" value="0">
<input type="radio" name="city" value="1" checked>
<input type="radio" name="city" value="2">
<script>
document.querySelectorAll('[type="radio"]')[2].checked = true;
</script>

也就是HTML设置的是第2个单选框放大1.5倍,JS立即瞬间设置第3个单选框选中,结果发现就算很快,哪怕是几乎无延迟的JS修改, :default 伪类选择器的渲染依然不受影响。

CSS3 :default伪类选择器使用简介 

因此,本题答案是无影响。

2. 研究2: <option> 如果没有设置 selected 属性,浏览器会默认呈现第1个 <option> ,此时第1个 <option> 响应 :default 伪类选择器吗?

例如:

option:default {
    color: red;
}
<select name="city">
    <option value="-1">请选择</option>
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">深圳</option>
    <option value="4">广州</option>
    <option value="5">厦门</option>
</select>

结果第一个 <option> 没有红色,如下图,因此, :default 选择器要想有作用,必须要 selected 为 true 。同样的,对于单复选框, checked 值也要是 true 。

因此,本题答案是不会响应。

四、CSS3 :default伪类选择器实际应用

虽然说 :default 选择器是用来标记默认状态的,避免选择混淆。但是实际上,在我看来,更有实用价值的应该是“推荐标记”。

现代web应用越来越智能,有时候有些操作会智能给用户push一些选择,其中默认将推荐的设置设为 checked 状态,以前我们的做法是另外输出文字“(推荐)”,现在有了 :default 选择器,我们的实现可以变得更加简洁,也更容易维护。

您可以狠狠地的点击这里: :default选择器与自动添加推荐字样demo

效果如下图:

CSS3 :default伪类选择器使用简介 

点击其他选项,“推荐”二字依然稳固。以后,如果要更换推荐选项了,直接修改 input 的 checked 属性就可以,维护更简单了。

相关CSS和HTML代码如下:

input:default + label::after {
    content: '(推荐)';
}
<p><input type="radio" name="pay" id="pay0"> <label for="pay0">支付宝</label></p>
<p><input type="radio" name="pay" id="pay1" checked> <label for="pay1">微信</label></p>
<p><input type="radio" name="pay" id="pay2"> <label for="pay2">银行卡</label></p>

总结

以上所述是小编给大家介绍的CSS3 :default伪类选择器使用简介,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
使用before和:after伪类制作css3圆形按钮
Apr 08 HTML / CSS
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
Nov 05 HTML / CSS
使用CSS3编写类似iOS中的复选框及带开关的按钮
Apr 11 HTML / CSS
canvas需要在标签里直接定义宽高
Dec 17 HTML / CSS
深入解析HTML5的IndexedDB索引数据库
Sep 14 HTML / CSS
HTML5 3D衣服摇摆动画特效
Mar 17 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
Jul 11 HTML / CSS
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
Jul 24 HTML / CSS
canvas实现圆形进度条动画的示例代码
Dec 26 HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
Aug 29 HTML / CSS
html如何对span设置宽度
Oct 30 HTML / CSS
详解CSS不受控制的position fixed
May 25 HTML / CSS
css3编写浏览器背景渐变背景色的方法
Mar 05 #HTML / CSS
CSS3下的渐变文字效果实现示例
Mar 02 #HTML / CSS
CSS3 @keyframes简单动画实现
Feb 24 #HTML / CSS
css3 实现圆形旋转倒计时
Feb 24 #HTML / CSS
css3 仿写阿里云水纹效果的示例代码
Feb 10 #HTML / CSS
纯css3使用vw和vh实现自适应的方法
Feb 09 #HTML / CSS
如何用css3实现switch组件开关的方法
Feb 09 #HTML / CSS
You might like
2.PHP入门
2006/10/09 PHP
WordPress中访客登陆实现邮件提醒的PHP脚本实例分享
2015/12/14 PHP
PHP实现的随机红包算法示例
2017/08/14 PHP
php实现微信企业付款到个人零钱功能
2018/10/09 PHP
Nigma vs Liquid BO3 第一场2.14
2021/03/10 DOTA
js冒泡法和数组转换成字符串示例代码
2013/08/14 Javascript
javascript移动设备Web开发中对touch事件的封装实例
2014/06/05 Javascript
JS判断移动端访问设备并加载对应CSS样式
2014/06/13 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
Bootstrap精简教程中秋大放送
2016/09/15 Javascript
js如何获取网页所有图片
2017/05/12 Javascript
node.js调用Chrome浏览器打开链接地址的方法
2017/05/17 Javascript
用nodejs实现json和jsonp服务的方法
2017/08/25 NodeJs
jQuery选择器之属性过滤选择器详解
2017/09/28 jQuery
vue+element实现批量删除功能的示例
2018/02/28 Javascript
vue中el-upload上传图片到七牛的示例代码
2018/10/19 Javascript
vue实现页面滚动到底部刷新
2019/08/16 Javascript
初学vue出现空格警告的原因及其解决方案
2019/10/31 Javascript
echarts实现折线图的拖拽效果
2019/12/19 Javascript
使用python实现baidu hi自动登录的代码
2013/02/10 Python
python 3.7.0 安装配置方法图文教程
2018/08/27 Python
django ManyToManyField多对多关系的实例详解
2019/08/09 Python
Pytorch 实现focal_loss 多类别和二分类示例
2020/01/14 Python
Python TKinter如何自动关闭主窗口
2020/02/26 Python
Python爬虫实例——爬取美团美食数据
2020/07/15 Python
python实现简单猜单词游戏
2020/12/24 Python
1688平价精选商城:阿里集团旗下,工厂出厂价格直销
2017/04/24 全球购物
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
介绍一下SQL Server的全文索引
2013/08/15 面试题
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上?
2013/03/30 面试题
Jdbc数据访问技术面试题
2012/03/30 面试题
中学生评语大全
2014/04/18 职场文书
酒店七夕情人节活动策划方案
2014/08/24 职场文书
关于晚自习早退的检讨书
2014/09/13 职场文书
会议通知格式范文
2015/04/15 职场文书
2016年小学生寒假家长评语
2015/10/10 职场文书