伪类

:hover

选择鼠标指针浮动在其上的元素

1. 延时触发

通过 transition 实现

/* 鼠标浮动在其上一秒后，才变红 */
div:hover {
  color: red;
  transition: all 0s 1s;
}

2. 非子元素的 :hover

使用兄弟选择器实现

/* 经过按钮时，显示图片。在图片上时，也显示图片 */
button:hover + img,
img:hover {
  display: inline;
}

显隐延时使用 display 是无效的，但 visibility 是有效的
若中间有间隔，导致还未移动到图片上，图片就隐藏了，就可以通过延时来解决
```
img {
  margin-top: 20px;
  visibility: hidden;
  transition: visibility .2s;
}

button:hover + img,
img:hover {
  visibility: visible;
}
```

:active

选择激活的元素

1. 兼容性问题

在 IE 浏览器下，<html>、<body> 应用 :active 设置背景色后，背景色无法还原
移动端 Safari 浏览器下，:active 默认无效，可以使用 -webkit-tap-highlight-color 实现触摸高亮

2. CSS 数据上报

如果想知道按钮的点击率，CSS 可以实现埋点
```
button:active::after {
  content: url(xxx);
}
```

:focus

选择获得焦点的元素

1. 只匹配特定元素

非 disabled 状态的表单元素
包含 href 属性的 a 标签
area 元素
summary 元素
设置了 contenteditable 属性的普通元素
设置了 tabindex 属性的普通元素
- tabindex="0"：可以点击触发，也可以被 Tab 键索引
- tabindex="-1"：只可以点击触发

2. 任何元素点击显示

但存在问题，在 iOS Safari 浏览器下，元素一旦处于 focus 状态，除非点击其他可聚焦元素来转移焦点，否则会一直保持，可通过给祖先容器设置 tabindex="-1"，同时取消 outline 样式解决
<div class="App" tbaindex="-1"></div>
.App {
	/* focus 状态，外边框不高亮 */
	outline: 0 none;
  }

:focus-within

匹配元素自身或者它的某个后代匹配 :focus 的元素

/* 仅当 form 处于聚焦状态 */
form:focus {}

/* form 自身，或者 form 内部的任意子元素处于聚焦状态时 */
form:focus-within {}

:focus-visible

此伪类的出现是为了兼顾视觉体验和键盘无障碍访问

在鼠标、触摸屏用户的使用习惯上，是不需要focus样式显示的，反而focus的显示会影响视觉体验
但是键盘用户非常需要focus样式，不然会不清楚当前焦点元素在哪里

所以出现这个伪类，用于匹配在浏览器认为适当的情况之下显示焦点环的元素

用户是否表示喜欢总是看到焦点指示器：如果用户表示他们总是希望看到焦点指示器，那么 :focus-visible 将总是在焦点元素上匹配，就像 :focus 一样
该元素是否需要输入文本：当一个需要文本输入的元素（比如，<input type="text">）被聚焦时，:focus-visible 将始终匹配
该元素是否需要输入文本：当一个需要文本输入的元素（比如，<input type="text">）被聚焦时，:focus-visible 将始终匹配
焦点是通过脚本移动的吗：如果焦点是通过调用 JavaScript 的 focus() 事件来移动，那么新的焦点元素只有在之前的焦点元素与之匹配时才会匹配 :focus-visible

/* 去除鼠标点击时候的 outline，保留键盘访问时的 outline */
:focus:not(:focus-visible) {
  outline: 0;
}

:any-link

匹配**每一个有 href 属性的 <a>、<area>、<link>**元素

:disabled

匹配任何被禁用的元素

:read-only

匹配**有 readonly 属性的 <input> <textarea>**元素

:placeholder-shown

匹配**显示 placeholder text 时的 <input> <textarea>**元素

1. 实现 Material Design 占位符交互效果

2. 空值判断

借助 :placeholdershown 伪类来判断一个输入框中是否有值

input:placeholder-shown + div::after {
  content: "不能为空";
}

:default

匹配表单元素中的默认元素

1. 推荐标记

input:default + label::after {
  content: "（推荐）";
}

:checked

匹配任何处于选中状态的 radio、checkbox、option 元素

1. 实现 Switch 按钮

2. 实现多选择标签变换

通过 CSS 显示已选中的复选框数量

:valid 和 :invalid

:valid 匹配验证正确的表单元素

:invalid 匹配验证错误的表单元素

1. 局限性

页面一加载，此两个伪类就会触发，不符合用户使用习惯
可通过 JS 消除隐患

2. 控制表单校验

当输入框有 min 和 max 校验时，可以加入 :out-of-range 伪类细化提示

<input pattern="\w{4,6}" min="0000" max="9999">

input:out-of-range + .valid-tips::before {
    content: "超出范围限制";
    color: red;
}

:not()

匹配当前元素与括号里面的选择器不匹配的元素

1. 可以不断级联

/* 不禁用，且不处于只读状态的 input 元素 */
input:not(:disabled):not(:read-only) {}