多年来，我
:active相同的方式设置了元素的状态
:hover :focus和
:active 。 我不记得确切地是什么时候开始这样做的。 但这远非最佳方法。 为什么，我将尝试在本文中进行解释。
这是我一直使用的代码示例。
.selector { &:hover, &:focus, &:active { ... } }
当我开始更加关注使用键盘时界面的可访问性（尤其是焦点状态）时，我得出的结论是，我们不应平等地风格化元素的不同状态。
指导，焦点和活动状态的样式应不同。原因很简单：这些是不同的条件！
今天，我想向您展示轻松地安排所有三个状态的神奇方法。
让我们开始
:hover 。
悬停样式（：悬停）
:hover当用户将鼠标悬停在元素上时，
:hover触发。
通常，这种情况是更改
background-color和/或text
color的
background-color color 。 差异不必很明显，因为用户已经知道他们将鼠标悬停在某个元素上。
button { background-color: #dedede; } button:hover { background-color: #aaa; }
样式焦点（：焦点）
:focus当元素获得焦点时触发焦点。 这可以通过两种方式实现：
- 使用“ Tab”按钮选择项目时
- 当您用鼠标单击一个项目时
重点内容包括：
- 链接（
<a> ） - 按钮（
<button> ） - 表单元素（
<input> ， <textarea>等） - 具有
tabindex属性的元素
需要牢记的一些重点：
- 用户不能使用“ Tab”按钮选择具有属性
tabindex="-1"的元素，但可以用鼠标单击它。 单击会引起焦点状态。 - 在Safari和Firefox Mac OS浏览器上，单击不会引起对
<button>元素的关注 - 当您单击<a>链接时，在按下鼠标按钮时焦点仍停留在该链接上。 释放按钮时，如果在
href属性中指定了同一页面上存在的id ，则焦点将重定向到另一个位置
通过设置焦点状态的样式，我们更关心的是使用键盘界面的用户，而不是那些使用鼠标的用户。
用户按下Tab键时，他们不知道焦点将移至哪个元素，但只能猜测。 这就是为什么
我们需要状态上的显着变化-将用户的注意力吸引到关注的元素上 。
在大多数情况下，默认情况下可以进行焦点设计。 如果要以
自己的方式设置
样式 ，请记住以下四点：
- 添加笔画
- 创建动画
- 更改
background-color color变化
由于更改
background-color和
color属性通常是使用
:hover来完成的，因此使用笔触或动画来布置
:focus状态是有意义的。
您可以使用
outline ，
border和
box-shadow属性的组合来创建有趣的焦点样式。 如何做到这一点，我在文章“
创建自定义焦点样式 ”中进行了描述。
button { background-color: #dedede; } button:hover { background-color: #aaa; } button:focus { outline: none; box-shadow: 0 0 0 3px lightskyblue; }
活动状态的程式化（：active）
与现实生活中的事物互动时，您会期望得到一种回应。 例如，当您按下一个按钮时，您希望它被按下。
在网站上，此响应也很有用。 您可以使用
:active来风格化“按下按钮”的时刻。
与元素进行交互时会调用此状态 。 在这种情况下，交互意味着：
- 按住鼠标左键在元素上（即使焦点不在焦点上）
- 按住空格键（在按钮上）
button:active { background-color: #333; border-color: #333; color: #eee; }
需要注意两点：
- 按住空格会导致状态
:active按钮（<button>） :active状态，但是按住Enter不会 - 输入启动链接，但不会导致活动状态。 空格键根本不会启动链接
默认链接样式
链接默认具有活动状态样式。 按下时，它们变成红色
主动与焦点之间的关系
当您将鼠标左键按住聚焦的元素时，将激活其活动状态。 但是同时，焦点状态也被调出。
释放鼠标左键时，焦点仍保留在元素上。
这适用于除链接和按钮之外的大多数可聚焦元素。
对于链接：- 在Firefox和Chrome中按住鼠标左键会导致状态
:active和:focus 。 在Safari中，仅状态:active （仅在Mac OS上测试） - 如果释放鼠标按钮
:focus停留在链接上（如果href属性未链接到同一页面上的id ）。 在Safari中，焦点返回到<body>
对于按钮：- 按住鼠标左键时：仅在Chrome中调用状态
:active和:focus 。 状态:focus在Safari和Firefox（Mac）中根本没有调用:focus 。 我在这里写过这种奇怪的行为。
如果您希望单击使按钮集中注意力，则需要尽快添加此JavaScript（有关必要内容，您可以在本文中阅读我上面指示的链接）。
document.addEventListener('click', event => { if (event.target.matches('button')) { event.target.focus() } })
添加此代码会将按钮行为更改为以下内容：
- 按住鼠标按钮时，：在所有浏览器中都会调用：
:active :focus仅:focus放在Chrome中 - 如果释放鼠标按钮，它将调用
:focus在Safari和Firefox（Mac OS）上。 :focus仍然停留在所有浏览器的按钮上
添加一段JS代码后，Safari中的按钮行为既然您已经了解了有关悬停，焦点和活动状态的所有信息，那么我想谈谈这三种样式的样式
魔术组合
魔术组合
使用户在瞄准，聚焦或与元素
互动时得到回应 。 这是您需要的代码：
.element:hover, .element:active { } .element:focus { }
对于鼠标用户：
- 当用户将鼠标悬停在某个元素上时，
background-color （和/或color ）将发生变化。 有回应。 - 当用户单击元素时，将显示焦点的笔触轮廓。 有回应。
对于键盘用户：
- 当用户使用“ Tab”按钮选择一个项目时，将显示聚焦笔划。 有回应。
- 当它们与元素交互时，
background-color （和/或color ）会改变。 有回应。
两全其美！
- 我没有仔细测试魔术组合，这只是支持此概念概念的一个论据。 如果您能帮助我检查一下并让我知道可能的问题，将不胜感激。
- 如果要检查，请不要使用Codepen 。 Codepen中链接的焦点状态非常奇怪。 如果将鼠标悬停在链接上，则会删除焦点笔画。 怎么了 我不知道 有时在我看来，最好不要使用其他工具来检查此类情况。 只是老式的HTML，CSS，JS。
不是一个神奇的（但可能更好）的组合
如上所述，在Mac OS的Safari和Firefox中，按钮单击具有怪异的行为。 如果您添加了我上面建议的JavaScript代码段，则魔术组合仍然有效。 但是并不完美。
这是在Mac OS上的Safari和Firefox上发生的情况：
- 当用户按下鼠标按钮时，没有任何变化
- 当用户释放按钮时，该项目将获得焦点。
如果您认为这足够了，那么魔术组合就可以了。 你可以在那儿停下来。
但是，如果您认为这种行为无法获得足够的访问，则可能需要分别设置状态
:hover :focus和
:active样式。
.element:hover { } .element:active { } .element:focus { }
如果所有三种状态均已设置样式，则Safari中的按钮行为仅此而已！ 感谢您的阅读，并希望您今天学到了一些新知识。