:default

版本：CSS3

CSS伪类:default表示一组相关元素中的默认表单元素。该选择器可以在<button>、<input type="checkbox">、<input type="radio">、<option>上使用。

语法:

E:default{sRules}

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

/* selects any default <input> */
input:default {
  background-color: lime;
}

允许多个选择的分组元素也可以具有多个默认值，即，它们可以具有最初选择的多个项目。在这种情况下，所有默认值都使用:default伪类表示。例如，您可以在一组复选框之间设置默认复选框。

浏览器支持


IE不支持`:default`。其余新版浏览器都支持`: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伪类选择器作用设计的作用是让用户在选择一组数据的时候，依然知道默认选项是什么，否则其他选项一多，选着选着就不知道默认提供的是哪个了，算是一种体验增强策略。作用不是很强烈，但是关键时刻却很有用。

//HTML
<input type="radio" name="season" id="spring">
<label for="spring">spring</label>

<input type="radio" name="season" id="summer" checked>
<label for="summer">summer</label>

<input type="radio" name="season" id="fall">
<label for="fall">fall</label>

<input type="radio" name="season" id="winter">
<label for="winter">winter</label>


//CSS

input:default {
  box-shadow: 0 0 2px 1px coral;
}

input:default + label {
  color: coral;
}

springsummerfallwinter

: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。

因此，本题答案是不会响应。

:default伪类选择器实际应用

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

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

效果如下图：

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