本篇内容主要讲解“CSS3的:default伪类选择器怎么用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“CSS3的:default伪类选择器怎么用”吧!CSS3:default伪类选择器只能作用在表单元素上，表示默认状态的表单元素。举个例子，一个下拉框，可能有多个选项，我们默认会让某个处于selected状态，此时这个可以看成是处于默认状态的表单元素（例如下面示意代码的“选项4”），理论上可以应用:default伪类选择器。假设CSS如下：则在Chrome浏览器下，当我们选择其他选项，此时就可以看到选项4是红色了，效果如下图：Firefox浏览器下效果也是类似：IE浏览器则不支持。因此，移动端可以放心使用，桌面端不用管IE的项目也可以用起来。CSS3:default伪类选择器作用设计的作用是让用户在选择一组数据的时候，依然知道默认选项是什么，否则其他选项一多，选着选着就不知道默认提供的是哪个了，算是一种体验增强策略。作用不是很强烈，但是关键时刻却很有用。测试代码如下：也就是HTML设置的是第2个单选框放大1.5倍，JS立即瞬间免费云主机域名设置第3个单选框选中，结果发现就算很快，哪怕是几乎无延迟的JS修改，:default伪类选择器的渲染依然不受影响。因此，本题答案是无影响。例如：结果第一个没有红色，如下图，因此，:default选择器要想有作用，必须要selected为true。同样的，对于单复选框，checked值也要是true。因此，本题答案是不会响应。虽然说:default选择器是用来标记默认状态的，避免选择混淆。但是实际上，在我看来，更有实用价值的应该是“推荐标记”。现代web应用越来越智能，有时候有些操作会智能给用户push一些选择，其中默认将推荐的设置设为checked状态，以前我们的做法是另外输出文字“（推荐）”，现在有了:default选择器，我们的实现可以变得更加简洁，也更容易维护。您可以狠狠地的点击这里：:default选择器与自动添加推荐字样demo效果如下图：点击其他选项，“推荐”二字依然稳固。以后，如果要更换推荐选项了，直接修改input的checked属性就可以，维护更简单了。相关CSS和HTML代码如下：到此，相信大家对“CSS3的:default伪类选择器怎么用”有了更深的了解，不妨来实际操作一番吧！这里是百云主机网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
免责声明：本站发布的图片视频文字，以转载和分享为主，文章观点不代表本站立场，本站不承担相关法律责任；如果涉及侵权请联系邮箱：360163164@qq.com举报，并提供相关证据，经查实将立刻删除涉嫌侵权内容。
微信扫一扫 
