伪类：当前

Question

当您在该页面上时，我正试图让我的菜单栏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;
}

我已经尝试了一切，但它无法正常工作。我确定它很简单，但我不知道它是什么

Answer 1

除了是一个仅在最近才引入的全新伪类:current does not mean what you think it means。具有讽刺意味的是，相同的草案确实提出了另一个新的伪类，用于链接到当前文档，称为:local-link，但这些都没有实现，因为它们只是刚刚提出的。 （事实上​​，我刚刚发现:local-link已于2014年5月从Selectors 4 ED中删除 - 不明白为什么，但是这样的伪类实施的可能性变得更糟。）< / p>

无论哪种方式，目前没有指向当前页面的链接的伪类。您需要使用PHP来确定哪些链接指向当前页面，将class="current"添加到相应的元素，然后定位该类。