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 {

Answer 2

选择器中的空格代表不同的元素

＆＃34; #page1 nav a＆＃34;将选择所有具有父元素nav的链接（a），这些链接位于ID为page的元素中。

所有这些选择器都适用于您的情况：

<style>
nav div#currentLink.buttons a {...}
nav #currentLink.button a {...}
nav #currentLink a {...}
div#currentLink.button a {...}
#currentLink.button a {...}
#currentLink a {...}

一般情况下，您应该使用ID（#）作为页面上唯一的元素，例如：
＆＃34; #logo，#heade，#main-menu，#unicorn＆＃34;。
类（.）用于标记和通常重复的元素：
＆＃34; .button，.title .selected＆＃34;

保持你的css干净和可读，尝试用＆＃34;最接近＆＃39;命名＆＃39;来构建选择器。 element（带ID）+类和元素选择器的最短UNIQUE组合＆＃34;

所以在上面的例子中#currentLink a是完成作业的完美选择。

Answer 3

您可以将类添加到当前选定的链接中：

<nav>
<div id="currentLink" class="buttons">
<a href="index.html" class="active">Om oss</a>
</div>
<div id="buttonVarahundar" class="buttons">
<a href="">Våra hundar</a>
</div>
</nav>

所以链接的CSS将是：

nav a {
/* your styles */ 
}

所选链接的一些CSS，当每个选定的链接看起来都相同时：

nav a.active {
/* your styles */
}

当每个选定的链接看起来不同时，您必须更具体：

#currentlink a.active {
/* Styles for #currentlink when it is the selected*/
}
#buttonVarahundar a.active {
/* Styles for #buttonVarahundar when it is the selected link */
}

突出显示当前页面的链接

3 个答案: