这篇文章将为大家详细讲解有关CSS3 :default伪类选择器怎么用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
成都网站设计、网站建设,成都做网站公司-创新互联已向超过千家企业提供了,网站设计,网站制作,网络营销等服务!设计与技术结合,多年网站推广经验,合理的价格为您打造企业品质网站。
一、CSS3 :default伪类选择器简介
CSS3 :default 伪类选择器只能作用在表单元素上，表示默认状态的表单元素。
举个例子，一个下拉框，可能有多个选项，我们默认会让某个
选项4
假设CSS如下：
option:default {
color: red;
}则在Chrome浏览器下，当我们选择其他选项，此时就可以看到选项4是红色了，效果如下图：
Firefox浏览器下效果也是类似：
IE浏览器则不支持。
因此，移动端可以放心使用，桌面端不用管IE的项目也可以用起来。
二、CSS3 :default伪类选择器作用
CSS3 :default 伪类选择器作用设计的作用是让用户在选择一组数据的时候，依然知道默认选项是什么，否则其他选项一多，选着选着就不知道默认提供的是哪个了，算是一种体验增强策略。作用不是很强烈，但是关键时刻却很有用。
三、CSS3 :default伪类选择器一些特性研究
1. 研究1：JS快速修改会不会有影响？
测试代码如下：
:default {
transform: sclae(1.5);
}
也就是HTML设置的是第2个单选框放大1.5倍，JS立即瞬间设置第3个单选框选中，结果发现就算很快，哪怕是几乎无延迟的JS修改， :default 伪类选择器的渲染依然不受影响。
因此，本题答案是无影响。
2. 研究2：
例如：
option:default {
color: red;
}
请选择
北京
上海
深圳
广州
厦门
结果第一个
因此，本题答案是不会响应。
四、CSS3 :default伪类选择器实际应用
虽然说 :default 选择器是用来标记默认状态的，避免选择混淆。但是实际上，在我看来，更有实用价值的应该是“推荐标记”。
现代web应用越来越智能，有时候有些操作会智能给用户push一些选择，其中默认将推荐的设置设为 checked 状态，以前我们的做法是另外输出文字“（推荐）”，现在有了 :default 选择器，我们的实现可以变得更加简洁，也更容易维护。
您可以狠狠地的点击这里： :default选择器与自动添加推荐字样demo
效果如下图：
点击其他选项，“推荐”二字依然稳固。以后，如果要更换推荐选项了，直接修改 input 的 checked 属性就可以，维护更简单了。
相关CSS和HTML代码如下：
input:default + label::after {
content: '（推荐）';
}
支付宝
微信
银行卡
关于“CSS3 :default伪类选择器怎么用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
分享名称：CSS3:default伪类选择器怎么用
转载源于：
http://kswsj.cn/article/iijjhc.html
