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 相关文章推荐
CSS3中的元素过渡属性transition示例详解
Nov 30 HTML / CSS
CSS3 3D制作实战案例分析
Sep 18 HTML / CSS
CSS Grid布局教程之网格单元格布局
Dec 30 HTML / CSS
简单掌握CSS3中resize属性的用法
Apr 01 HTML / CSS
css3 伪类选择器快速复习小结
Sep 10 HTML / CSS
使用CSS3实现字体颜色渐变的实现
Aug 10 HTML / CSS
深入研究HTML5实现图片压缩上传功能
Mar 25 HTML / CSS
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
Jan 30 HTML / CSS
HTML5 Canvas阴影使用方法实例演示
Aug 02 HTML / CSS
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
Nov 07 HTML / CSS
Html5页面中的返回实现的方法
Feb 26 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
Sep 15 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
PHP中设置时区,记录日志文件的实现代码
2013/01/07 PHP
php根据操作系统转换文件名大小写的方法
2014/02/24 PHP
php查询操作实现投票功能
2016/05/09 PHP
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
2009/08/04 Javascript
js bind 函数 使用闭包保存执行上下文
2011/12/26 Javascript
javascript中打印当前的时间实现思路及代码
2013/12/18 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
2014/05/19 Javascript
new Date()问题在ie8下面的处理方法
2014/07/31 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
2014/10/17 Javascript
JavaScript实现图片自动加载的瀑布流效果
2016/04/11 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
基于js中style.width与offsetWidth的区别(详解)
2017/11/12 Javascript
express express-session的使用小结
2018/12/12 Javascript
vue中实现Monaco Editor自定义提示功能
2019/07/05 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
2020/05/08 Javascript
微信小程序返回上一级页面的实现代码
2020/06/19 Javascript
[45:38]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第一局
2016/03/02 DOTA
使用Python解析JSON数据的基本方法
2015/10/15 Python
python抓取网页中链接的静态图片
2018/01/29 Python
Python实现的NN神经网络算法完整示例
2018/06/19 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
python日期相关操作实例小结
2019/06/24 Python
pygame实现打字游戏
2021/02/19 Python
python3 使用openpyxl将mysql数据写入xlsx的操作
2020/05/15 Python
selenium切换标签页解决get超时问题的完整代码
2020/08/30 Python
python中用Scrapy实现定时爬虫的实例讲解
2021/01/18 Python
html5应用缓存_动力节点Java学院整理
2017/07/13 HTML / CSS
说说你所熟悉或听说过的j2ee中的几种常用模式?及对设计模式的一些看法
2012/05/24 面试题
致跳远运动员加油稿
2014/02/11 职场文书
经典公益广告词
2014/03/13 职场文书
师范大学生求职信
2014/06/13 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
保卫工作个人总结
2015/03/03 职场文书
西游记读书笔记
2015/06/25 职场文书
python基于tkinter制作无损音乐下载工具
2021/03/29 Python
星际争霸:毕姥爷vs解冻01
2022/04/01 星际争霸