CSS3的:default伪类选择器怎么用

本篇内容主要讲解“CSS3的:default伪类选择器怎么用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS3的:default伪类选择器怎么用”吧!

专注于为中小企业提供网站建设、做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业息烽免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了近1000家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。

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

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

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


    
    
    
    选项4
    
    

假设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);
}



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

CSS3的:default伪类选择器怎么用

因此,本题答案是无影响

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

例如:

option:default {
    color: red;
}

    请选择
    北京
    上海
    深圳
    广州
    厦门

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

CSS3的:default伪类选择器怎么用

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

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

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

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

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

效果如下图:

CSS3的:default伪类选择器怎么用

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

相关CSS和HTML代码如下:

input:default + label::after {
    content: '(推荐)';
}

 支付宝

 微信

 银行卡

到此,相信大家对“CSS3的:default伪类选择器怎么用”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


当前文章:CSS3的:default伪类选择器怎么用
分享链接:http://cdiso.cn/article/gogdej.html

其他资讯