CSS中:checked与:default伪类的区别是什么？

两者最关键的差异在于匹配的状态逻辑完全不同：

• :checked 看当前实时状态
  它匹配的是表单元素当前处于选中的状态，不管这个选中是页面加载时的默认设置，还是用户后来手动点击选中的。一旦用户取消选中（比如把复选框的勾去掉），这个伪类就不再作用于该元素。

• :default 认初始默认配置
  它只认页面加载时的默认初始元素：比如带checked属性的复选框/单选按钮、表单里默认的提交按钮（比如未指定type的<button>）。哪怕用户后来修改了元素的选中状态，这个伪类依然会绑定在当初的默认元素上。

优先级与叠加表现 #

当一个元素同时符合两个伪类的匹配条件时（比如你代码里带checked的复选框），两者的CSS优先级完全相同，此时CSS代码中定义靠后的样式会覆盖靠前的——就像你例子里，如果:default写在:checked后面，蓝色外框就会显示；反之则显示橙色外框。

示例代码 #

CSS

* {
  border: none;
}

:checked {
  outline: 3px solid orange;
}

:default {
  outline: 3px solid blue;
}

HTML

<input type="checkbox" checked/>
<!-- 注：哪个伪类在CSS里定义得更靠后，对应的样式就会生效 -->

更直观的场景演示 #

比如一组单选按钮：

<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女

• 页面刚加载时，"男"按钮同时匹配:checked和:default；
• 当用户切换选中"女"后，"女"按钮匹配:checked，但:default依然只匹配"男"这个初始默认选项。

内容的提问来源于stack exchange，提问作者Emin Altan