CSS 播客 - 018：专注
在网页上 您点击某个链接后，用户会跳转到网站的主要内容。 这些链接通常称为跳转链接或锚链接。 当您通过键盘打开该链接时，可以按 Tab 键和 Enter 键， 主内容容器周围有一个聚焦环。这是为什么？
这是因为 <main> 具有 tabindex="-1" 属性值，
这意味着可以通过编程方式聚焦。
由于浏览器网址栏中的 #main-content 与 id 匹配，因此当定位到 <main> 时，它会获得程序化焦点。在这些情况下，很容易移除焦点样式，
但适当并细心地处理焦点有助于创造
提供良好的用户体验
也可以用来增加互动的兴趣。
为什么专注至关重要？
作为 Web 开发者，您的工作就是让网站对所有人开放且易于访问。使用 CSS 创建无障碍焦点状态就是其中的一项责任。
焦点样式可为使用键盘或 开关控制 来浏览网站并与之互动 如果某个元素获得焦点，但没有视觉提示，用户可能会失去对焦点的跟踪。在以下情况下，这可能会造成导航问题并导致不必要的行为： 比如说，跟踪的链接不正确。
元素如何获得焦点
某些元素可自动获得焦点；这些元素接受互动和输入，例如 <a>、<button>、<input> 和 <select>。简而言之，就是所有表单元素、按钮和链接。
您通常可以使用 tab 键在页面上前进，使用 shift + tab 键后退，您可以浏览网站的可聚焦元素。
此外，还有一个名为 tabindex 的 HTML 属性，可用于更改标签页导航索引，即
元素聚焦的顺序（每当用户按下 Tab 键时），
或焦点随着网址中的哈希值变化或 JavaScript 事件而转移。
如果将 HTML 元素的 tabindex 设为 0，
它可以通过 Tab 键获得焦点，并且遵循全局 Tab 索引，
由文档来源顺序定义
如果您将 tabindex 设置为 -1，则它只能通过程序化方式接收焦点，也就是说，只有在发生 JavaScript 事件或发生哈希更改（与网址中元素的 id 匹配）时，它才能接收焦点。如果您将 tabindex 设置为高于 0 的任何值，系统会将其从全局标签页索引（由文档来源顺序定义）中移除。现在， Tab 键顺序将由 tabindex 的值定义，
因此，举例来说，具有 tabindex="1" 的元素将在具有 tabindex="2" 的元素之前获得焦点。
设置焦点样式
某个元素获得焦点时的默认浏览器行为是呈现焦点环。 此对焦环因浏览器和操作系统而异。
可以通过 CSS 更改这种行为
使用 :focus、:focus-within 和 :focus-visible
伪类，
伪类课程。
请务必设置与元素的默认样式形成对比的焦点样式。例如，常见的方法是使用 outline 属性。
a:focus {
outline: 2px solid slateblue;
}
outline 属性可能会显示得过于靠近链接文本，但 outline-offset 属性可以帮助解决此问题，因为它会添加额外的视觉 padding，而不会影响元素填充的几何尺寸。outline-offset 的正数值会将轮廓向外推，负数值会将轮廓向内拉。
目前，在某些浏览器中，如果您为元素设置了 border-radius 并使用 outline，则它们将不匹配 - 轮廓将有尖角。因此，很容易就想使用具有较小模糊半径的 box-shadow，因为 box-shadow 会剪裁到形状，遵循 border-radius，但此样式不会在 Windows 高对比度模式下显示。这是因为 Windows 高对比度模式不会应用阴影，并且通常会忽略背景图片，以便采用用户的首选设置。
总结
创建与元素的默认状态形成对比的焦点状态非常重要。默认的浏览器样式已为您执行此操作，但如果您想更改此行为，请注意以下事项：
- 避免对可接收键盘焦点的元素使用
outline: none。 - 请避免将
outline样式替换为box-shadow。 因为它们不会在 Windows 高对比度模式下显示 - 仅在绝对必要时，才应为 HTML 元素上的
tabindex设置正值。 - 确保焦点状态与默认状态相比非常清晰。
检查您的理解情况
测试您对专注力的掌握情况
以下哪些是自动可聚焦的元素？
<a><p><button><input><output><select>以下哪种输入设备可以设置焦点？