:check 与 :default

:check

我不知道你是否接触过这个伪类操作符。但是我接下来会用最简单的语言把它的功能说清楚。这个伪类操作符已经几乎被所有浏览器所支持了。

我们还是先看看他的概念吧：

可以由用户切换单选框 () 和复选框 () 。某些菜单项在用户选择它们时被“选中”。当这样的元素被“切换”时，应用 :checked 伪类。

所以，它的使用场景是用于单选框和复选框。

接着，我们来继续看看它是怎么用的吧。

其实它的适用范围不广，而且我们好像平时不怎么会用它吧。不过我还是举个例子吧：

我们平时的单选框是这样的：

男


女

使用前

好吧，那么我们来看看添加 :checked 代码后是什么样的吧：

input:checked+span {
  background: pink;
  color: white;
}

使用后

当然，它也没有那么有用。所以我也觉得它有啥很好用的地方。不过顺路也就讲讲 HTML5 中 checked 吧。

女

我们在 input 中添加一个 checked 或者 checked="checked" 就表示该单选框或者多选框是被默认选中的。我觉得这才是挺有用的技能呀。

使用 checked

---

:default

:default 是一个伪类选择器，用于选择和样式一个或多个 UI 元素，它们是一组相似元素中的默认元素。

相信你一定看到这个概念很懵吧。。这什么鬼呀！

此选择器通常适用于上下文菜单项，按钮和选择列表/菜单 一个示例是一组按钮中的默认提交按钮。 另一个例子是弹出菜单中的默认选项。 选择多组中的多个元素可以具有多个：默认元素。

额。。可能还是太拗口了。那么我们简单来说吧，它的适用范围是：input、checkbox、radio 按钮和 submit 按钮等上。

可是尴尬的是。。我想要举例子的时候，发现它根本不支持啊！

哎。。。不管它了吧。不过有个喜大普奔的事：Boostrap 4 将会取消对 IE9 的支持！真的是，用户被惯出毛病以后，浏览器不升级也就算了。还得逼着我们去做一些没有意义的事。