0

我正在使用 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>

我使用 class bloger 为最后一个 li 项目更改它的颜色这里是 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;
}

如何更改多个课程项目？

4

3 回答 3

1

删除.active & 之间的空格。博客类。这样写：

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

而不是这个：

.topNav li.active .bloger a{....}
于 2012-09-24T09:47:50.230 回答
0

编辑多个类很简单。

您所要做的就是用逗号划定它们！


例子：

HTML：

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

CSS：

.box1,.box2{
    color:red;
}
于 2012-09-24T10:12:21.733 回答
0

演示

你好现在

代替

.topNav li.active .bloger a

进入这个 

   .topNav .bloger a

现场演示

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

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

第二个习惯了这个悬停，就像这样

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

演示

于 2012-09-24T09:43:31.227 回答