html - 如何设置链接的背景颜色？

Question

我一直在尝试弄清楚如何将我所在的当前页面设置为与其他链接不同的背景颜色，但无济于事。

HTML

<div id="navigation">
    <ul>
        <li><a href="<?php echo base_url() ?>index.php/home">Home</a></li>
        <li><a href="<?php echo base_url() ?>index.php/portfolio">Portfolio</a></li>
        <li><a href="<?php echo base_url() ?>index.php/about">About</a></li>
        <li><a href="<?php echo base_url() ?>index.php/gallery">Gallery</a></li>
        <li><a href="<?php echo base_url() ?>index.php/blog">Blog</a></li>
    </ul>
</div>

我想要的是将当前事件链接设置为黑色，其他四个链接设置为灰色。这样，如果我访问 Portfolio，例如，该链接是黑色的，其余的是灰色的。我该怎么做？

Answer 1

谢天谢地，没有涉及 Javascript。 HTML 和 CSS 可以很好地完成这项任务。首先，让我们创建您的 HTML。您显然知道您在哪个页面上，因此我们将向当前页面的链接添加一个类。因此，例如，如果我们在 /index.php/home 上我们的标记可能与此类似。

<div id="navigation">
    <ul>
        <li><a class="current" href="<?php echo base_url() ?>index.php/home">Home</a></li>
        <li><a href="<?php echo base_url() ?>index.php/portfolio">Portfolio</a></li>
        <li><a href="<?php echo base_url() ?>index.php/about">About</a></li>
        <li><a href="<?php echo base_url() ?>index.php/gallery">Gallery</a></li>
        <li><a href="<?php echo base_url() ?>index.php/blog">Blog</a></li>
    </ul>
</div>

现在，在为当前 链接着色之前，我们要为其余链接着色。我们可以像这样通过 CSS 选择其余链接。

#navigation a {
}

以下 CSS 将选择所有 <a> navigation 的子元素元素。所以现在我们需要设置它的背景颜色。设置背景颜色的 CSS 属性为 background-color: xxx .在哪里xxx是十六进制代码、rgb 值或颜色名称。因此，我们将执行以下操作以使所有链接变为灰色。

#navigation a {
    background-color: #333; /* or whatever grey you want. */
}

这会将每个链接设置为灰色。现在，我们需要将当前 链接设置为黑色。

如果您注意到了，我们添加了 class="current"到当前链接，在本例中为 home 链接。接下来我们需要为此创建适当的样式。我们的 CSS 声明看起来与此类似。

#navigation .current {
}

以上声明适用于类为current的所有元素那是元素 navigation 的子元素.所以现在我们像这样设置背景颜色。

#navigation .current {
    background-color: #000;
}

所以，我们最终的 CSS 应该是这样的。

#navigation a {
    background-color: #333;
}

#navigation .current {
    background-color: #000;
}

请注意，顺序很重要!如果我们将第二个声明放在首位，它会被更通用的链接声明覆盖。