我正在尝试让我的菜单栏 background
在您访问该页面时变黑,例如。如果您在 SFX 页面上,SFX 选项卡将为黑色,而不是红色。
这是我的 HTML:
<div id="menuBar" align="left">
<table cellspacing="5" >
<tr>
<td><a href="index2.php">Home</a></td>
<td><a href="editorial.php">Editorial</a></td>
<td><a href="sfx.php">SFX</a></td>
<td><a href="occasion.php">Occasion</a></td>
<td><a href="artwork.php">Artwork</a></td>
<td><a href="body.php">Body Painting</a></td>
<td><a href="contact.php">Contact</a></td>
<td><a href="about.php">About</a></td>
</tr>
</table>
</div>
还有我的 CSS:
#menuBar {
position: absolute;
left: 0;
right: 0;
margin: auto;
width: 810px;
height: 30px;
top: 53px;
vertical-align:central;
}
#menuBar a {
background: #AA0000;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 11px;
padding-right: 11px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
color: Beige;
text-decoration: none;
font-weight:bold;
font-size:18px;
font-family: Gabriola,"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
}
#menuBar a:hover {
background: #000000;
transition:all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3 ease-in-out;
-webkit-transition: all .3s ease-in-out;
}
#menuBar a:focus {
background:#000000;
}
#menuBar a:current {
background:#000000;
}
我什么都试过了,还是不行。我确定这很简单,但我不知道它是什么
最佳答案
除了作为最近才引入的全新伪类之外,:current
does not mean what you think it means .具有讽刺意味的是,同一份草案确实为指向当前文档的链接提出了另一个新的伪类,称为 :local-link
。 ,但这些都没有实现,因为它们最近才被提出。 (事实上,我刚刚发现 :local-link
已经从 2014 年 5 月的 Selectors 4 ED 中删除了——不知道为什么,但是这样一个伪类被实现的可能性很大更糟。)
无论哪种方式,目前都没有指向当前页面的链接的伪类。您将需要使用 PHP 来确定这些链接中的哪些链接指向当前页面,将 class="current"
添加到适当的元素,并定位该类。
关于html - 伪类 :current,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23958495/