<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:>登录后复制
996
收藏
