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

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

网页开发中，根据页面状态动态改变元素样式是常见需求。本文介绍如何利用aria-current="page"<https:>属性，为对应的<code><a><https:>标签添加<code>font-medium<https:>样式，实现简洁高效的样式更新。<https:><p>假设HTML结构如下：<https:><div class="code" style="position:relative; padding:0px; margin:0px;"><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;code&gt;aria-current=&quot;page&quot;&lt;https:&gt;可能出现在不同的&lt;code&gt;&lt;a&gt;&lt;https:&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;https:&gt;&lt;p&gt;只需在CSS中添加如下规则：&lt;https:&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;a[aria-current=&quot;page&quot;] { font-weight: medium; https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712* 等同于font-medium *https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712 }&lt;https:&gt;&lt;p&gt;这段CSS代码会精准选择所有具有&lt;code&gt;aria-current=&quot;page&quot;&lt;https:&gt;属性的&lt;code&gt;&lt;a&gt;&lt;https:&gt;标签，并设置其&lt;code&gt;font-weight&lt;https:&gt;为&lt;code&gt;medium&lt;https:&gt;，从而实现&lt;code&gt;font-medium&lt;https:&gt;样式的动态应用。 无需JavaScript代码，CSS本身就能完成此任务，简洁且高效。 样式会随着&lt;code&gt;aria-current=&quot;page&quot;&lt;https:&gt;属性的添加或移除自动更新，确保样式始终与页面状态同步。&lt;https:&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;/https:&gt;&lt;/a&gt;&lt;/code&gt;&lt;/https:&gt;&lt;/code&gt;&lt;/p&gt; &lt;div class=&quot;aritcle_card&quot;&gt; &lt;a class=&quot;aritcle_card_img&quot; href=&quot;/ai/1463&quot;&gt; &lt;img src=&quot;https://img.php.cn/upload/ai_manual/000/000/000/175680176337096.png&quot; alt=&quot;图改改&quot;&gt; &lt;/a&gt; &lt;div class=&quot;aritcle_card_info&quot;&gt; &lt;a href=&quot;/ai/1463&quot;&gt;图改改&lt;/a&gt; &lt;p&gt;在线修改图片文字&lt;/p&gt; &lt;div class=&quot;&quot;&gt; &lt;img src=&quot;/static/images/card_xiazai.png&quot; alt=&quot;图改改&quot;&gt; &lt;span&gt;455&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;a href=&quot;/ai/1463&quot; class=&quot;aritcle_card_btn&quot;&gt; &lt;span&gt;查看详情&lt;/span&gt; &lt;img src=&quot;/static/images/cardxiayige-3.png&quot; alt=&quot;图改改&quot;&gt; &lt;/a&gt; &lt;/div&gt; &lt;/https:&gt;</pre>