&nbs p;
一、 CSS 3 :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 ; } 则在Ch rom e浏览器下，当我们选择其他选项，此时就可以看到选项4是 红色 了，效果如下图：
Firefox浏览器下效果也是类似：
IE浏览器则不支持。
因此，移动端可以放心使用，桌面端 不用 管IE的项目也可以用起来。
二、CSS3 :default伪类选择器作用
CSS3 :default 伪类选择器作用设计的作用是让用户在选择一组数据的时候，依然 知道 默认选项 是什么 ，否则其他选项一多，选着选着就不知道默认提供的是哪个了，算是一种体验增强策略。作用不是很强烈，但是关键时刻却很有用。
三、CSS3 :default伪类选择器一些特性研究
1. 研究1：JS快速修改会不会有影响？测试代码如下：
:default { transform: sclae(1.5); } <input ty PE ="radio" n am e="c IT y" 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 伪类选择器的渲染依然不受影响。
因此， 本题答案是无影响 。
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
效果如下图：
点击其他选项，“推荐”二字依然稳固。以后，如果要更换推荐选项了，直接修改 input 的 checked 属性就可以，维护更 简单 了。
相关CSS和HT ML 代码如下：
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>
五、结束语
存在既有道理。没有一无是处的特性，只是你没有为其找到适合的场景。
多多关注基础，拓展技 术 的广度，很容易迸发技术的灵感。
感谢你的阅读，欢迎交流！
（本篇完）
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-CSS3 :default伪类选择器简介 全部内容，希望文章能够帮你解决 html5教程-CSS3 :default伪类选择器简介 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-CSS3 :default伪类选择器简介的详细内容...