表单可不能少，它可以帮助我们跟网站沟通得更顺畅。别怕，CSS3有个好帮手——:default伪类选择器，用好了，你就能随心所欲地改变表单元素的默认样式。那今天我就教你们怎么用这个神奇的工具以及要注意啥，希望你们都能学会！
什么是:default伪类选择器
选项1 选项2 选项3 选项4 选项5 选项6
default简单说就是预设，比如上网看网页时，那个默认勾选的选项就是default的作用。就算你换了别的选项，之前选过的也还在，好让你找起来更容易，用着更顺手。
option:default {
color: red;
}
你知道吗？那个名为:default的伪类只对表单元素起作用，像下拉菜单、单选框、复选框这些都可以。它能让默认状态下的表单元素看起来更有特色，读起来也更清楚明白。
在不同浏览器中的表现
我们来聊聊浏览器里那个叫:default的伪类选项！比如说Chrome，你换个选项试试，原来默认那条颜色立马变红了，特别明显。Firefox也差不多这样。所以，不管你是在手机上还是电脑上看网页，都不用怕兼容性的问题，放心大胆地用:default伪类选！
别着急IE浏览器可选不上这个工具！如果遇到要在IE中兼容的项目，那就只能找其他方法
JS快速修改的影响
不用担心。不管你怎么玩儿表单元素，那个:default伪类选器都不受你乱改的影响！大胆地用JavaScript操控它们，别怕改错默认样式！
没有设置selected属性的情况
:default {
transform: sclae(1.5);
}
document.querySelectorAll('[type="radio"]')[2].checked = true;
有的时候，网页上的表单里头有些选项没有被选中，浏览器就会自动给你选第一个。那这个时候，第一个选项还能响应那个:default伪类选择器吗？我试过了，发现它还是老样子，颜色没变化。所以，想要让:default选择器发挥作用，首先得把selected属性设成真的！当然，同样也要把单选和多选框都设置成真才行喔。
实际应用中的价值
告诉你个秘密，其实default也能做推荐标签！你看现在很多网站都能帮我们挑出最好的选择。以前我们得在每个选项上标明“（推荐）”，现在可省事多了，只要用default指向想要推荐的东西，轻轻一点就行。这样页面看起来清爽多了，管理起来也方便多了？
案例分析
不怕我们试试这种办法能不能帮到你。说白了，就是想让下拉菜单的默认选项变红，不管别人怎么选，都要保持红色。这么想想，就知道default伪类选择器有多好用了！
option:default {
color: red;
}
请选择
北京
上海
深圳
广州
厦门
总结与展望
你可能想知道为什么要了解这个“default”伪类选择器，对？简单点来说，它可以帮我们看清网站表单最初的样子。至于以后能用到哪儿，那就得等时间来告诉我们了。期待！
咱们来聊聊，你在编程时有没有用过那个叫default的伪类呀？是咋用的？赶紧到评论区炫耀一下！别忘了给这篇文章点个赞或者分享出去，让更多人也学学这个小技巧~
评论0