更改多个类li项中的颜色

Question

我正在使用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项的类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;
}

当我在其他礼品上时，颜色会发生变化但不在其上 这是错吗？

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

如何更改多个课程项目？

Answer 1

删除 .active ＆amp;之间的空格。 bloger class.Write这样：

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

而不是：

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

Answer 2

的 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 的

Answer 3

编辑多个类很简单。

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

例如：

HTML：

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

CSS：

.box1,.box2{
    color:red;
}