html - 在html中为列表添加颜色

Question

我是 css 的新手，我正面临这个问题

header.html

<div class="header">
    <div class="headright">  
        <div class="languages">
            <ul class="language1">
                <li class="active"><a href="login.php">Login</a></li>
                <li> | </li>
                <li class="active">EN</li>
                <li><a href="fr/index.php">FR</a></li>
            </ul>
         </div>
    </div>
</div>

class "active"成功改变了 "EN"的颜色，但没有改变 "Login"的颜色。

这是CSS:

.headright {
    float: right;
    display: block;
    margin-top:-10px;
}
.headright .languages {
    display: inline;
    padding-right: 10px;
    float: left;
}
.language1 {
    float:left;
    display:inline;
    font-family: 'texgyreadventorregular';
}
.headright .headsites {
    float: left;
    display: inline;
    margin-right: 18px;
    font-family: 'texgyreadventorregular';
}
.headright .headsites ul li {
    list-style-type: none;
    display: inline;
    color: #ffffff;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    clear: left;
}
.headright .languages ul li {
    list-style-type: none;
    display: inline;
    color: #ffffff;
    font-size:14px;
}
.headright .languages ul li a {
    color: #ffffff;
    font-size:14px;
}
.headright .languages ul li.active {
    color: #99cc00;
}

如何让Login也变色？

Answer 1

那是因为登录是一个链接。链接标记带有默认的浏览器样式，除非您专门覆盖/定位它们。

按如下方式更改您的 CSS。改变这个:

.headright .languages ul li.active {
    color: #99cc00;
}

对此:

.headright .languages ul li.active,
.headright .languages ul li.active a {
    color: #99cc00;
}

这会将你的颜色应用到 li 标签上，还有它们中的任何链接:)