CSS 播客 - 018：专注
在网页上 您点击某个链接后，用户会跳转到网站的主要内容。 这些链接通常称为跳转链接或锚链接。 当您通过键盘打开该链接时，可以按 Tab 和 Enter 键， 主内容容器周围有一个聚焦环。这是为什么？
这是因为 <main> 具有 tabindex="-1" 属性值，
这意味着可以通过编程方式聚焦。
定位 <main> 时 - 由于 #main-content
与 id 匹配 - 它会获得程序化焦点。
在这些情况下，很容易移除焦点样式，
但适当并细心地处理焦点有助于创造
打造无障碍体验
也可以用来增加互动的兴趣。
为什么专注力很重要？
作为一名 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>以下哪种输入设备可以设置焦点？