#书摘 #css #前端
《CSS 选择器世界》 默认选项:default伪类
CSS :default伪类选择器只能作用在表单元素上，匹配处于默认状态的表单元素。

虽然:default伪类用来标记默认状态，以避免选择混淆，但实际上，它更有实用价值的应用应该是“推荐标记”。
例如，某产品有多个支付选项，其中商家推荐使用微信支付
以前的做法是默认选中微信支付选项，并在后面加上“（推荐）”。这样实现有一个缺点：如果以后要改变推荐的支付方式，需要修改单选框的checked属性和“（推荐）”文字的位置。
有了:default伪类，可以让它变得更加简洁，也更容易维护。

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>

由于:default伪类的匹配不受之后checked属性值变化的影响，因此“（推荐）”会一直跟在“微信”的后面，功能不会发生变化。这样做之后维护更方便了，例如，如果以后想将推荐支付方式更换为“支付宝”，则直接设置“支付宝”对应的<input> 单选框为checked状态即可，“（推荐）”文字会自动跟在“支付宝”的后面，整个过程我们只需要修改一处代码。
读者可以手动输入 https://demo.cssworld.cn/selector2/11/1-3.php 体验与学习。

https://memo.cosine.ren/m/401

demo.cssworld.cn

:default伪类与自动添加推荐 » CSS选择器世界demo演示

CSS选择器世界demo实例演示页面之 :default伪类与自动添加推荐