如何利用aria-current属性和CSS动态改变导航链接的样式？

巧用aria-current属性和CSS，动态调整导航链接样式

网页开发中，根据页面状态动态改变元素样式是常见需求。本文介绍如何利用aria-current=”page”属性，为对应的标签添加font-medium样式，实现简洁高效的样式更新。

假设HTML结构如下：

<div class="nav" id="nav">  <a class="group relative px-4" href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712">home<https:><a class="group relative px-4" href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pricing">pricing<https:><a class="group relative px-4" href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712story">our story<https:><a aria-current="page" class="group relative px-4" href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712blog">blog<https:><https:><https:><p>aria-current="page"<https:>属性标识当前激活的导航项。  我们需要根据此属性，动态为对应的<a><https:>标签应用font-medium<https:>样式。由于aria-current="page"<https:>可能出现在不同的<a><https:>标签上，CSS<a style="color:#f60; text-decoration:underline;" title="属性选择器" href="https://www.php.cn/zt/70573.html" target="_blank">属性选择器</a>是理想的解决方案。<https:><p>只需在CSS中添加如下规则：<https:><pre class="brush:php;toolbar:false">a[aria-current="page"] {  font-weight: medium; https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712* 等同于font-medium *https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712}<https:><p>这段CSS代码会精准选择所有具有aria-current="page"<https:>属性的<a><https:>标签，并设置其font-weight<https:>为medium<https:>，从而实现font-medium<https:>样式的动态应用。  无需JavaScript代码，CSS本身就能完成此任务，简洁且高效。  样式会随着aria-current="page"<https:>属性的添加或移除自动更新，确保样式始终与页面状态同步。<https:></https:></https:></https:></https:></https:></https:></a></https:></p></https:>

登录后复制