我在使用模板开发个人网站时遇到了一些问题。就目前而言,以下工作正常:
<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,同时还要确保它处于事件状态。
即关于链接将是颜色:激活时为红色,恢复链接将是颜色:激活时为蓝色等。
提前致谢!
最佳答案
当你有 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;
}
关于html - 事件元素上的 CSS 选择器(按 id),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27489312/