html - 事件元素上的 CSS 选择器(按 id)

Question

我在使用模板开发个人网站时遇到了一些问题。就目前而言，以下工作正常:

<nav id="nav">
<ul>
    <li><a href="#top" id="top-link" class="skel-layers-ignoreHref"><span class="icon fa-home">Introduction</span></a></li>
    <li><a href="#about" id="about-link" class="skel-layers-ignoreHref"><span class="icon fa-male">About Me</span></a></li>
    <li><a href="#resume" id="resume-link" class="skel-layers-ignoreHref"><span class="icon fa-star">Resumé</span></a></li>
    <li><a href="#projects" id="resume-link" class="skel-layers-ignoreHref"><span class="icon fa-heart">Current Projects</span></a></li>
    <li><a href="#skills" id="skills-link" class="skel-layers-ignoreHref"><span class="icon fa-th">Skills & Hobbies</span></a></li>
    <li><a href="#contact" id="contact-link" class="skel-layers-ignoreHref"><span class="icon fa-paper-plane">Contact</span></a></li>
</ul>

使用以下 CSS:

#nav ul li a.active span:before
{
    color: green;
}

但是我想使每个在激活时都有不同的颜色。我很难通过 ID 选择 in css，同时还要确保它处于事件状态。

即关于链接将是颜色:激活时为红色，恢复链接将是颜色:激活时为蓝色等。

提前致谢!

Answer 1

当你有 ID 时，直接使用它们，因为它们是唯一的:

nav ul li a {
    color: black; /* common unactive color */
}

#about-link.active {
    color: red;
}

#resume-link.active {
    color: blue;
}

等...

如果你想对悬停状态和事件类有同样的效果，你可以这样做:

#about-link:hover, #about-link.active {
    color: blue;
}