css - 突出显示当前页面的链接

Question

我无法在显示的页面上突出显示当前选定的链接。我只使用 HTML5 和 CSS。我发现当我将每个 html 文档中的 id 更改为“currentLink”时它会起作用，但只能像这样使用传统的类/id:

#y.x {
   /* will select element of id="y" that also has class="x" */
}

但是，为了使整个链接元素可点击，我使用了“nav”，这似乎与上述解决方案不兼容。

这是我的索引页面 HTML:

        <nav>
            <div id="currentLink" class="buttons">
                <a href="index.html">Om oss</a>
            </div>
            <div id="buttonVarahundar" class="buttons">
                <a href="">Våra hundar</a>
            </div>
            <div id="buttonValpar" class="buttons">
                <a href="">Valpar</a>
            </div>
            <div id="buttonKontakt" class="buttons">
                <a href="contact.html">Kontakt</a>
            </div>          
        </nav>

还有 CSS:

nav a {
    display: block;
    width: 25%;
    height: 3em;
    float: left;
    padding-top: 8%;
    padding-right: 0%;
    padding-bottom: 4%;
    padding-left: 0%;   
    background-color: #CCFFCC;  
    box-shadow: 0.2em -0.2em 10px #303030;          
    border-radius: 1em 1em 0 0; 
}

nav a #currentLink .buttons {
    background-color: #E0FFFF;      
    box-shadow: 0.2em -0.2em 10px #303030, 0 0.2em #FFFFFF;
}

我正在做的是替换一些颜色和阴影来创建我想要的视觉效果。你知道这如何与第一种方法一起工作，但不是我自己的吗？

Answer 1

替换

nav a #currentLink .buttons {

通过

nav div#currentLink.buttons a {