更改多个类 li 项中的颜色答案

【问题标题】：Changing the color in multiple class li item更改多个类 li 项中的颜色
【发布时间】：2012-09-15 18:11:13
【问题描述】：

我正在使用 pagesrcoller 演示并尝试进行一些更改。

    <div class="pageScrollerNav topNav light">
    <ul>
        <li><img style="padding: 25px 145px 30px 0px" src="./images/logo_demo.png" height="25" /></li>
        <li><a href="#">index</a></li>
        <li><a href="#">item1</a></li>
        <li><a href="#">item2</a></li>
        <li><a href="#">item3</a></li>
        <li class="bloger"><a href="#">Blog</a></li>
    </ul>
</div>

我为最后一个 li 项目使用 class bloger 来改变它的颜色这是css

    .topNav li a{
    display: block;
    height: 18px;
    margin: 25px 0 0;
    line-height: 16px;
    padding: 7px 15px;
    color: #666;
    border: 1px solid #fff;
    font-weight: normal;
    text-decoration: none;
}

.topNav li.bloger a{
    display: block;
    height: 18px;
    margin: 25px 0 0;
    line-height: 16px;
    padding: 7px 15px;
    color: #049bd9;
    border: 1px solid #fff;
    font-weight: normal;
    text-decoration: none;
}

.topNav,
.topNav.light{
    background: #fff;
}

.topNav li.active a,
.topNav.light li.active a{
    background: #f0f0f0;
    color: #444444;
    border-color: #f0f0f0;
}

.topNav li a,
.topNav.light li a{
    color: #444444;
    text-decoration: none;
}

.topNav li.active .bloger a{
    background: #9be2ff;
    color: #049bd9;
    border-color: #9be2ff;
}

.topNav li.bloger a{
    color: #049bd9;
    text-decoration: none;
}

当我在其他 li 项目上而不是在上面时颜色会改变这是错吗？

    .topNav li.active .bloger a{
    background: #9be2ff;
    color: #049bd9;
    border-color: #9be2ff;
}

如何更改多个班级项目？

【问题讨论】：

我刚刚试用了您的代码，悬停时没有颜色变化。您的其他样式表可能与您在问题中包含的样式表发生冲突或混合。
您将鼠标悬停在哪个元素上，您要更改哪些元素？

标签： css hover html-lists

【解决方案1】：

编辑多个类很简单。

你所要做的就是用逗号来描述它们！

示例：

HTML：

<div class='box1'></div>
<div class='box2'></div>

CSS：

.box1,.box2{
    color:red;
}

【讨论】：

【解决方案2】：

删除 .active 和 .blogger 类之间的空格。这样写：

.topNav li.active.bloger a{....}

而不是这个：

.topNav li.active .bloger a{....}

【讨论】：

【解决方案3】：

Demo

你好

替换

.topNav li.active .bloger a

进入这个

   .topNav .bloger a

Live demo

------------------------------------------

--------------------------------------------

秒用于这个悬停就像这样

  .topNav li:hover a,  .bloger a{
    background: #9be2ff;
    color: #049bd9;
    border-color: #9be2ff;
}

Demo

【讨论】：