0

私は pagercoller デモを使用しており、いくつかの変更を加えようとしています。

    <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アイテムのクラスブロガーを使用して色を変更します。ここに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

デモ

こんにちは

交換

.topNav li.active .bloger a

これに 

   .topNav .bloger a

ライブデモ

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

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

2番目はこのホバーに次のように使用されます

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

デモ

于 2012-09-24T09:43:31.227 に答える
0

複数のクラスの編集は簡単です。

コンマで区切るだけです！


例：

HTML:

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

CSS:

.box1,.box2{
    color:red;
}
于 2012-09-24T10:12:21.733 に答える