简介
:target 选择器是一个 CSS3 选择器，用于选择文档中当前激活的元素（即具有 id 属性且与 URL 中的片段标识符匹配的元素）。
语法
------- - -- --- -- -- -
用法
:target 选择器可用于对当前激活的元素应用样式。当用户单击带有 id 属性的链接时，浏览器会将 URL 中的片段标识符更改为该 id，从而激活该元素。然后，可以应用与该 id 匹配的 :target 选择器样式。
示例
考虑以下 HTML 代码：
-- ----------------------- -- ----------- ---- ---------------- ---- -- -- -------- ------
当用户单击“Link to Element”链接时，浏览器会将 URL 更改为 http://example.com/index.html#my-element，激活具有 id="my-element" 的元素。然后，我们可以使用以下 CSS 样式：
------- - ----------------- ------- -
这将使激活的元素（#my-element）变为黄色背景。
优点
:target 选择器提供了以下优点：
- 允许对当前激活的元素进行样式化。
- 允许创建动态交互，例如突出显示导航菜单中的当前页面。
- 无需使用 JavaScript 即可实现某些效果。
缺点
:target 选择器也有一些缺点：
- 仅适用于当前激活的元素。
- 可能会导致意外的样式化，因为 URL 中的片段标识符可以手动更改。
- 在某些浏览器中可能存在兼容性问题。
替代方案
在某些情况下，可以使用其他选择器作为 :target 选择器的替代方案，例如：
:active选择器：选择当前处于活动状态的元素（例如，被单击或聚焦）。:focus选择器：选择当前具有焦点的元素。[aria-current="true"]选择器：选择当前处于活动或选定状态的元素。
结论
:target 选择器是一个有用的 CSS3 选择器，用于对当前激活的元素进行样式化。虽然它有其优点，但也有其缺点和替代方案。在使用 :target 选择器时，请仔细考虑其优点和缺点，并根据具体情况选择最合适的解决方案。