• 黔江:1000余亩蓝莓成熟 市民乐享“莓”好时光 2019-05-22
  • 【周展安】重新认识《在延安文艺座谈会上的讲话》的现实意义 2019-05-22
  • 十九大代表卢丽安利用周末与在沪台胞分享她参会心得  2019-05-19
  • (两会受权发布)最高人民法院院长简历 2019-05-14
  • 巫山县大峡村:深度贫困村的脱贫之变 2019-05-12
  • “关注泌尿健康”三金片媒体沙龙北京站 2019-05-09
  • 人民网评:教师欠薪为何又成新闻了? 2019-05-07
  • 涪陵:全国人大代表刘家奇院坝讲“两会” 乡亲点赞“六子致富经” 2019-05-07
  • 海南将与香港携手开拓国际客源市场--旅游频道 2019-05-01
  • 赵孟頫:书法大师是怎么炼成的? 2019-04-28
  • 只看到“贫穷”而看不到“富裕”,只看到贫富差别而看不到其根源是社会财富被个人占为私有的私有制,都是片面错误的。 2019-04-25
  • 紫光阁中共中央国家机关工作委员会 2019-04-25
  • 大众因“排放门”被罚10亿欧元 外媒:处罚还没完 2019-04-11
  • 俄罗斯足球队50横扫沙特队真是让人大饱眼福,特提精神!俄罗斯是战斗民族名不虚传。 2019-04-09
  • 西安启动唐长安城明德门遗址保护工程 2019-04-07
  • 今天看啥
      热点:

        新疆35选7的开奖号 www.ts3ne.com

        CSS3 :default伪类选择器使用简介,css3


        一、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是红色了,效果如下图:

         

        Firefox浏览器下效果也是类似:

         

        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 伪类选择器的渲染依然不受影响。

         

        因此,本题答案是无影响。

        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和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伪类选择器使用简介,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对帮客之家网站的支持!

        新疆35选7的开奖号 www.ts3ne.comtrue//www.ts3ne.com/CSSjc/1314440.htmlTechArticleCSS3 :default伪类选择器使用简介,css3 一、CSS3 :default伪类选择器简介 CSS3 :default 伪类选择器只能作用在表单元素上,表示默认状态的表单元素...

        相关文章

        帮客评论

        视觉看点
      • 黔江:1000余亩蓝莓成熟 市民乐享“莓”好时光 2019-05-22
      • 【周展安】重新认识《在延安文艺座谈会上的讲话》的现实意义 2019-05-22
      • 十九大代表卢丽安利用周末与在沪台胞分享她参会心得  2019-05-19
      • (两会受权发布)最高人民法院院长简历 2019-05-14
      • 巫山县大峡村:深度贫困村的脱贫之变 2019-05-12
      • “关注泌尿健康”三金片媒体沙龙北京站 2019-05-09
      • 人民网评:教师欠薪为何又成新闻了? 2019-05-07
      • 涪陵:全国人大代表刘家奇院坝讲“两会” 乡亲点赞“六子致富经” 2019-05-07
      • 海南将与香港携手开拓国际客源市场--旅游频道 2019-05-01
      • 赵孟頫:书法大师是怎么炼成的? 2019-04-28
      • 只看到“贫穷”而看不到“富裕”,只看到贫富差别而看不到其根源是社会财富被个人占为私有的私有制,都是片面错误的。 2019-04-25
      • 紫光阁中共中央国家机关工作委员会 2019-04-25
      • 大众因“排放门”被罚10亿欧元 外媒:处罚还没完 2019-04-11
      • 俄罗斯足球队50横扫沙特队真是让人大饱眼福,特提精神!俄罗斯是战斗民族名不虚传。 2019-04-09
      • 西安启动唐长安城明德门遗址保护工程 2019-04-07