如何利用aria-current属性动态为导航链接添加样式？

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

在网页开发中，动态更新元素样式是常见需求，例如根据用户当前位置高亮显示导航菜单。本文介绍如何利用aria-current="page"<https:>属性，无需JavaScript，仅用CSS就能优雅地为活动导航链接添加<code>font-medium<https:>样式。<https:><p><strong>问题：<https:><https:><p>假设我们有一个导航栏HTML片段：<https:><pre class="brush:php;toolbar:false;">&lt;div class=&quot;nav&quot; id=&quot;nav&quot;&gt; &lt;a class=&quot;group relative px-4&quot; href=&quot;https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712&quot;&gt;home&lt;https:&gt;&lt;a class=&quot;group relative px-4&quot; href=&quot;https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pricing&quot;&gt;pricing&lt;https:&gt;&lt;a class=&quot;group relative px-4&quot; href=&quot;https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712story&quot;&gt;our story&lt;https:&gt;&lt;a aria-current=&quot;page&quot; class=&quot;group relative px-4&quot; href=&quot;https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712blog&quot;&gt;blog&lt;https:&gt;&lt;https:&gt;&lt;https:&gt;&lt;p&gt;&lt;code&gt;aria-current=&quot;page&quot;&lt;https:&gt;属性标识当前激活的链接，但其位置会根据用户访问页面而变化。我们需要一种方法动态地为拥有该属性的&lt;code&gt;&lt;a&gt;&lt;https:&gt;标签添加&lt;code&gt;font-medium&lt;https:&gt;样式。&lt;https:&gt;&lt;p&gt;&lt;strong&gt;解决方案：&lt;https:&gt;&lt;https:&gt;&lt;p&gt;CSS&lt;a style=&quot;color:#f60; text-decoration:underline;&quot; title=&quot;属性选择器&quot; href=&quot;https://www.php.cn/zt/70573.html&quot; target=&quot;_blank&quot;&gt;属性选择器&lt;/a&gt;提供了解决方案。我们可以利用&lt;code&gt;[aria-current=&quot;page&quot;]&lt;https:&gt;选择器直接选中带有&lt;code&gt;aria-current=&quot;page&quot;&lt;https:&gt;属性的&lt;code&gt;&lt;a&gt;&lt;https:&gt;标签，并设置其样式。&lt;https:&gt;&lt;p&gt;以下CSS代码即可实现：&lt;https:&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;[aria-current=&quot;page&quot;] { font-weight: 600; https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712* 或添加类名：class=&quot;font-medium&quot; *https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712 }&lt;https:&gt;&lt;p&gt;这段代码会使所有带有&lt;code&gt;aria-current=&quot;page&quot;&lt;https:&gt;属性的元素字体加粗（&lt;code&gt;font-weight: 600&lt;https:&gt;相当于中等粗细）。 你也可以选择添加&lt;code&gt;font-medium&lt;https:&gt;类名，然后在你的样式表中定义&lt;code&gt;.font-medium { font-weight: 600; }&lt;https:&gt;。 选择哪种方式取决于你的项目CSS结构和命名规范。直接设置样式更简洁，而使用类名则更易于管理和复用。&lt;https:&gt;&lt;p&gt;通过这种方法，我们无需JavaScript代码，就能根据&lt;code&gt;aria-current=&quot;page&quot;&lt;https:&gt;属性动态地为导航链接添加样式，简洁高效地利用了HTML和CSS的特性。&lt;https:&gt;&lt;/https:&gt;&lt;/https:&gt;&lt;/code&gt;&lt;/p&gt;&lt;div class=&quot;aritcle_card flexRow&quot;&gt; &lt;div class=&quot;artcardd flexRow&quot;&gt; &lt;a class=&quot;aritcle_card_img&quot; href=&quot;/ai/857&quot; title=&quot;ChatDOC&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/ai_manual/001/503/042/68b6d657cd5a6840.png&quot; alt=&quot;ChatDOC&quot; onerror=&quot;this.onerror='';this.src='/static/lhimages/moren/morentu.png'&quot; &gt;&lt;/a&gt; &lt;div class=&quot;aritcle_card_info flexColumn&quot;&gt; &lt;a href=&quot;/ai/857&quot; title=&quot;ChatDOC&quot;&gt;ChatDOC&lt;/a&gt; &lt;p&gt;ChatDOC是一款基于chatgpt的文件阅读助手，可以快速从pdf中提取、定位和总结信息&lt;/p&gt; &lt;/div&gt; &lt;a href=&quot;/ai/857&quot; title=&quot;ChatDOC&quot; class=&quot;aritcle_card_btn flexRow flexcenter&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;span&gt;下载&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt;&lt;/https:&gt;&lt;/https:&gt;&lt;/code&gt;&lt;/https:&gt;&lt;/code&gt;&lt;/https:&gt;&lt;/code&gt;&lt;/https:&gt;&lt;/code&gt;&lt;/p&gt;&lt;/https:&gt;</pre></https:></p></https:></https:></a>