Question

我正在尝试创建一个css菜单栏，其中包含所有灰色文本，但单个链接除外，但我所做的每次尝试都会生成所有灰色或所有绿色链接文本。

如果你看下面，EcoSolutions应为绿色，其余为灰色

我已经包括了我最近的尝试......希望有人可以结束我的疯狂：D

由于

<ul id='Navigation' class='MenuBar'>
    <li><a href="../index.php">Home</a>
        <img src='images/separator.jpg'/></li>
    <li><a href="../simplify.php">Simplify</a>
        <img src='images/separator.jpg'/></li>
    <li><a href="../ecosolutions.php"class="green">EcoSolutions</a>
        <img src='images/separator.jpg'/></li>
    <li><a href="../contact_us.php">Contact</a>
        <img src='images/separator.jpg'/></li>          
    <li><a href="../partners.php">Partners</a>
        <img src='images/separator.jpg'/></li>
    <li><a href="../services.php">Services</a>
        <img src='images/transSeparator.png'/></li>
</ul>


/****  MenuBar STYLES ****/

.MenuBar
{
    width: 916px;
    padding: 0px 0px 0px 50px;
    margin: 0px 0px 0px 0px;
    text-align: center;
    color: #888;
}
.MenuBar ul
{
    list-style-type: none;
    font-size: .9em;
    cursor: default;
    font-weight: bold;
    padding: 10px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    font-family:Verdana, Geneva, sans-serif;
    color: #888;
}

.MenuBar ul li img
{
    padding: 0px 0px 0px 0px;
    margin: 0px 25px 0px 25px;
    vertical-align: middle;
}

.MenuBar li
{
    list-style-type: none;
    font-size: .9em;
    position: relative;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    float: left;
    height: 37px;
    padding: 0px;
    margin: 0px 0px 0px 0px;
    top: auto;
    bottom: auto;
    font-family:Verdana, Geneva, sans-serif;
    color: #888;
}

.green a:link, a:visited, a:active 
{
    display: inline;
    color: #94cf01;
    padding: 0px;
    margin: 0px;
    text-decoration: none;
}
.MenuBar  ul li a:link, a:visited, a:active 
{
    display: inline;
    cursor: pointer;
    color: #888;
    padding: 0px;
    margin: 0px;
    text-decoration: none;
}

.MenuBar  ul li a:hover 
{
    display: inline;
    color: #FF0000;
    padding: 0px;
    margin: 0px;
}

Answer 1

尝试更改此

.green a:link, a:visited, a:active 
{
    display: inline;
    color: #94cf01;
    padding: 0px;
    margin: 0px;
    text-decoration: none;
}

到这个

a.green:link, a.green:visited, a.green:active 
{
    display: inline;
    color: #94cf01;
    padding: 0px;
    margin: 0px;
    text-decoration: none;
}

Answer 2

正如Catfish暗示的那样，链接的CSS选择器不正确。您必须在复合选择器中重复该类。

您还需要更改非绿色链接上的样式，如下所示：

.MenuBar ul li a:link, 
.MenuBar ul li a:visited, 
.MenuBar ul li a:active {
    /* styles here */
}

问题在于那些选择器将应用于绿色链接，更具体地说，它们将覆盖由Catfish编写的绿色链接选择器。必须将其更改为至少与常规链接选择器一样具体。

.MenuBar ul li a.green:link, 
.MenuBar ul li a.green:visited, 
.MenuBar ul li a.green:active {
    /* styles here */
}

希望有所帮助！

Answer 3

查看我的评论......但

.MenuBar ul li a.green { color: green; }

应该有用。

Answer 4

总结一下，改变这个

<li><a href="../ecosolutions.php"class="green">EcoSolutions</a><img src='images/separator.jpg'/></li>

到此（注意href =“”和class =“”之间的空格）

<li><a href="../ecosolutions.php" class="green">EcoSolutions</a><img src='images/separator.jpg'/></li>

然后在你的CSS中，改变这个（你现在基本上意味着你在绿色类中有另一个元素，就像你的HTML所说的那样;）

.green a:link, a:visited, a:active 
{
    display: inline;
    color: #94cf01;
    padding: 0px;
    margin: 0px;
    text-decoration: none;
}

到这个

a.green:link, a.green:visited, a.green:active 
{
    display: inline;
    color: #94cf01;
    padding: 0px;
    margin: 0px;
    text-decoration: none;
}

你也可以更直接并且放

.MenuBar ul li a.green:link, .MenuBar ul li a.green:visited, .MenuBar ul li a.green:active 
{
    display: inline;
    color: #94cf01;
    padding: 0px;
    margin: 0px;
    text-decoration: none;
}

希望这有帮助

专门为单个链接设置颜色

4 个答案: