如何利用aria-current屬性動態為導航鏈接添加樣式？

巧用aria-current屬性，動態調整導航鏈接樣式

在網頁開發中，動態更新元素樣式是常見需求，例如根據用戶當前位置高亮顯示導航菜單。本文介紹如何利用aria-current=”page”屬性，無需JavaScript，僅用css就能優雅地為活動導航鏈接添加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:>樣式。<https:><p><strong>解決方案：<https:><https:><p>CSS<a style="color:#f60; text-decoration:underline;" title="屬性選擇器" href="https://www.php.cn/zt/70573.html" target="_blank">屬性選擇器</a>提供了解決方案。我們可以利用[aria-current="page"]<https:>選擇器直接選中帶有aria-current="page"<https:>屬性的<a><https:>標簽，并設置其樣式。<https:><p>以下CSS代碼即可實現：<https:><pre class="brush:php;toolbar:false">[aria-current="page"] {   font-weight: 600; https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712* 或添加類名：class="font-medium" *https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712 }<https:><p>這段代碼會使所有帶有aria-current="page"<https:>屬性的元素字體加粗（font-weight: 600<https:>相當于中等粗細）。  你也可以選擇添加font-medium<https:>類名，然后在你的樣式表中定義.font-medium { font-weight: 600; }<https:>。  選擇哪種方式取決于你的項目CSS結構和命名規范。直接設置樣式更簡潔，而使用類名則更易于管理和復用。<https:><p>通過這種方法，我們無需JavaScript代碼，就能根據aria-current="page"<https:>屬性動態地為導航鏈接添加樣式，簡潔高效地利用了HTML和CSS的特性。<https:></https:></https:></p></https:></https:></https:></https:></https:></p></https:>