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，同时确保它是活跃的。

即。 about-link为彩色：激活时为红色，resume-link为彩色：激活时为蓝色等。

提前致谢！

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;
}

Answer 2

使用以下类CSS选择器。确保在每个页面上规定哪些链接具有＆＃34;活动＆＃34;类：

http://jsfiddle.net/clarketm/6ksmj8wv/2/

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

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

id上的活动元素上的CSS选择器

2 个答案: