:default | CSS-Tricks

:default 伪选择器将匹配一组关联元素中的默认元素，例如，在一组默认选择的单选按钮中，即使用户选择了不同的值，该单选按钮也会匹配。

input[type="radio"]:default + label:after {
   content: ' (default)';
   color: #999;
   font-style: italic;
}

上面的 CSS 代码定位在一组单选按钮中默认选中的单选按钮紧随其后的标签

红色
绿色
蓝色

绿色单选按钮的标签后面将以灰色斜体文本的形式紧跟着“(default)”文本，在支持的浏览器中。

红色
绿色
蓝色

示例包括一组按钮中的默认提交按钮，弹出菜单中的默认选项，在 HTML 中设置了 checked 属性的单选按钮（如支持的浏览器中所示），以及默认情况下已选中的复选框。

浏览器支持

不同的浏览器有不同的支持级别。Firefox 提供完全支持。Webkit 浏览器支持按钮上的默认值，但不支持单选按钮或复选框，Opera 则相反，支持单选按钮和复选框，但不支持提交。

Opera 支持复选框和单选按钮上的 :default。
包括 Chrome 和 Safari 在内的 Webkit 浏览器支持提交按钮上的 :default
Firefox 支持复选框、单选按钮和提交输入类型上的 :default。
Internet Explorer 不支持复选框、单选按钮或提交输入类型上的 :default。

Chrome	Safari	Firefox	Opera	IE	Android	iOS
10	5	4	10	无	无	5

amin

# 2014 年 6 月 4 日

我正在使用最新版本的浏览器。似乎 :default 伪类只在 Firefox 中起作用。

Jyoti Puri

# 2014 年 11 月 27 日

嘿,

上面的默认示例在我的 Chrome 中不起作用。

Chris Cuilla

# 2016 年 8 月 19 日

上面的 HTML 代码略有错误。单选按钮的名称应该一致。例如，它们都应该设置为 name="color"。

A2D

# 2017 年 9 月 27 日

您好，没有提到 select（下拉菜单）元素和在 select 元素初始渲染时选中的任何子选项元素。这在 Chrome 和 Safari（OSX 和 iOS）上似乎运行良好。

使用此标记

<select required>
    <option value="" disabled="disabled" selected="selected">Select a value</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

以及此 CSS

select option:default {
    display: none;
}

您将获得一个下拉菜单，其中第一个选项显示为占位符，但在显示选项列表时不可见。

这在 Chrome Android 和 Safari iOS 上的移动 select 小部件上也适用。

Emin Altan

# 2023 年 1 月 30 日

您好，

checked 和 default 伪类有什么区别，因为它们看起来很相似？我感到困惑。请有人解释一下这两个属性的区别。

CSS

* {
  border: none;
}

:checked {
  outline: 3px solid orange;
}

:default {
  outline: 3px solid blue;
}

HTML

<input type="checkbox" checked />
    <!-- While :default pseudo-class defined last in CSS file this style win, when :checked pseudo-class defined in CSS file this last style win -->

更多资源

浏览器支持

评论

发表评论 取消回复

发表评论取消回复