用户行为伪类
CSS 伪类是 CSS 选择器最有趣的部分。
用户行为伪类是指与用户行为相关的一些伪类，例如，经过:hover、按下:active 以及聚焦:focus 等。
# 手型经过伪类:hover
:hover 不适用于移动端，虽然也能触发，但消失并不敏捷，体验反而奇怪。:hover 在桌面端网页很常用，例如鼠标经过时改变链接的颜色，或者改变按钮的背景色等。
# 优化经过伪类:hover
:hover触发是即时的，用户在不经意划过的时候，或出现浮层覆盖目标元素的情况。可以通过增加延迟显示优化体验。
# 非子元素的:hover显示
可以利用相邻兄弟选择符，控制兄弟元素。
# 纯:hover显示浮层的体验问题
:hover 交互在有鼠标的时候确实很方便，但是如果用户的鼠标坏了，或者设备本身没有鼠标(如触屏设备、智能电视)，则纯:hover 实现的下拉列表功能就完全痪了，根本没法使用，这是绝对会让用户抓狂的非常糟糕的体验。
可以增加:focus伪类，提升用户体验。
# 激活状态伪类:active
:active 伪类可以用于设置元素激活状态的样式，可以通过点击鼠标主键，也可以通过手指或者触控笔点击触摸屏触发激活状态。
# 焦点伪类:focus
与:active伪类不同，:focus默认只能匹配特定的元素，包括：
- 非
disabled状态的表单元素,如<input>输入框、<select>下拉框、<button>按钮等; - 包含
href属性的<a>元素; <area>元素，不过可以生效的 CSS 属性有限- HTML5中的
<summary>元素。
设置了 HTML contenteditable 属性的普通元素可以应用:focus 伪类。
设置了HTML tabindex 属性的普通元素也可以应用:focus 伪类。
如果期望<div>元素可以被 Tab 键索引，且被点击的时候可以触发:focus 伪类样式,则使用 tabindex="0"；如果不期望<div>元素可以被 Tab 键索引，且只在它被点击的时候触发:focus 伪类样式，则使用 tabindex="-1"。对于普通元素，没有使用自然数作为tabindex 属性值的场景。
# 整体焦点伪类:focus-within
:focus-within伪类和:focus 伪类有很多相似之处，那就是伪类样式的匹配离不开元素聚焦行为的触发。区别在于:focus 伪类样式只有在当前元素处于聚焦状态的时候才匹配，而:focus-within 伪类样式在当前元素或者是当前元素的任意子元素处于聚焦状态的时候都会匹配。
# 键盘焦点伪类:focus-visible
当元素匹配:focus伪类并且客户端 (UA) 的启发式引擎决定焦点应当可见 (在这种情况下很多浏览器默认显示“焦点框”。) 时，:focus-visible伪类将生效。
这个选择器可以有效地根据用户的输入方式 (鼠标 vs 键盘) 展示不同形式的焦点。
在目前版本的 Chrome 浏览器下浏览器认为使用键盘访问时触发的元素聚焦才是:focus-visible 所表示的聚焦。换句话说，:focus-visible 可以让我们知道元素的聚焦行为到底是鼠标触发还是键盘触发。因此,如果希望去除鼠标点击时候的 outline，而保留键盘访问时候的 outline，只要一条短短的CSS 规则就可以了:
:focus:not(:focus-visible) {
outline: 0;
}
2
3
