如何利用aria-current屬性和CSS為當前頁面導航鏈接添加font-medium樣式？

利用ARIA屬性和css動態調整導航鏈接樣式

網頁開發中，動態調整元素樣式十分常見。本文介紹如何結合html的aria-current=”page”屬性和css選擇器，為當前激活的導航鏈接設置font-medium樣式，提升用戶體驗。

假設您有一個導航欄，包含多個標簽鏈接到不同頁面，其中一個標簽包含aria-current=”page”屬性，標識當前頁面。我們的目標是利用CSS，僅為該鏈接添加font-medium樣式。

解決方案的核心在于CSS屬性選擇器。它允許根據html元素屬性進行元素選擇。我們可以使用[aria-current=”page”]選擇器，精準定位具有aria-current=”page”屬性的標簽，并為其應用樣式。

立即學習“前端免費學習筆記（深入）”；

具體實現：

在您的CSS樣式表中添加以下代碼：

[aria-current="page"] {   font-weight: medium; }

這段代碼會選擇所有具有aria-current=”page”屬性的元素，并將其font-weight屬性設置為medium，實現font-medium效果。頁面加載時，帶有aria-current=”page”屬性的鏈接會自動顯示為中等粗細字體。這種方法避免了使用JavaScript操作dom，更加簡潔高效。當然，如果您已使用JavaScript框架，也可以通過JavaScript獲取元素并修改樣式或添加類名，但CSS選擇器方法更直接、更簡單。