html - 如果 :active isn't working?，如何更改链接的事件颜色

Question

我试图让每个链接内的 class="H"在选择该链接时改变颜色。我尝试使用 a:active{ color:#17CCB2; } 然后 .H a:active { 颜色:#17CCB2; } 在 CSS 中，当我点击链接时似乎都没有改变颜色。这是我的 HTML 片段:

<div class="solution">
    <ul>
        <li><a id="FirstLink" href="javascript:" onclick="changeImg('images/auto-simp.gif');"><p class="solution-body"><span class="H">Auto Simplify</span><br>Automatically applies the Simplify Graphics for users that don't have the design tools, skills, or time to apply the SUI technique to their content.</p></a></li>
        <li><a id="AC" href="javascript:" onclick="changeImg('images/auto-colors@2x.png')"><p class="solution-body"><span class="H">Auto Color Palette</span><br>Technical communicators and trainers often deal with content that regularly updates or needs to be translated for multiple languages.</p></a></li>
        <li><a id="SG" href="javascript:" onclick="changeImg('images/simplifylaptop@2x.png')"><p class="solution-body"><span class="H">Simplify Graphics</span><br>Technical communicators and trainers often deal with content that regularly updates or needs to be translated for multiple languages.</p></a></li>
    </ul>
</div>

仅供引用，我对此很陌生，所以如果我让事情过于复杂，请告诉我:)

Answer 1

我使用了您的代码并稍作修改。如果你只是想在你的 .H 类中定位代码，那么使用代码段中显示的 CSS (.H:active { color:#17CCB2; } ) 正如其他人所说，这确实可以正常工作，我将其放入一个片段中，以便您可以运行它并亲自查看。

.H:active { color:#17CCB2; }

<div class="solution">
                        <ul>
                            <li><a id="FirstLink" href="javascript:" onclick="changeImg('images/auto-simp.gif');"><p class="solution-body"><span class="H">Auto Simplify</span><br>Automatically applies the Simplify Graphics for users that don't have the design tools, skills, or time to apply the SUI technique to their content.</p></a></li>
                            <li><a id="AC" href="javascript:" onclick="changeImg('images/auto-colors@2x.png')"><p class="solution-body"><span class="H">Auto Color Palette</span><br>Technical communicators and trainers often deal with content that regularly updates or needs to be translated for multiple languages.</p></a></li>
                            <li><a id="SG" href="javascript:" onclick="changeImg('images/simplifylaptop@2x.png')"><p class="solution-body"><span class="H">Simplify Graphics</span><br>Technical communicators and trainers often deal with content that regularly updates or needs to be translated for multiple languages.</p></a></li>
                        </ul>
                    </div>