2

これが私の問題です。ドロップダウン付きのナビゲーションバーを作成しています。リスト内のすべての li のクラスが既にあります。そのためのCSSがこちらです。

#menu li:hover {
    border: 1px solid #777777;
    padding: 4px 5px 4px 5px;
}

#menu li a {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px; 
    color: #EEEEEE;
}

#menu li:hover a {
    color:#161616;
}

これがどのように実装されたかです。

<ul id="menu">
    <li><a href="#">Button 1</a></li>
    <li><a href="#">Button 2</a></li>
    <li><a href="#">Button 2</a></li>

上記の css を使用して nodropdown というクラスを作成したいと考えています。これは私がフォーマットした方法ですが、正しくやったとは思いません。

#menu li.nodropdown :hover {
    border: 1px solid #777777;
    padding: 4px 5px 4px 5px;
}

#menu li.nodropdown a {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px; 
    color: #EEEEEE;
}

#menu li.nodropdown :hover a {
    color:#161616;
}

そして、nodropdown クラスを呼び出して、次のようにボタン 2 をオーバーライドできるようにしたいと考えています。

<ul id="menu">
    <li><a href="#">Button 1</a></li>
    <li class="nodropdown"><a href="#">Button 2</a></li> 
    <li><a href="#">Button 2</a></li>

しかし、私が nodropdown 用にクラスをフォーマットした方法が正しいとは思いませんか? 訂正していただけませんか？

4

1 に答える 1

2

グループ化の考え方は、CSS クラス/ID をまとめてグループ化し、共通の属性を一度だけリストすることです。

/* Attributes for all boxes */
td.Box1, td.Box2, td.Box3 {padding: 3px 6px; font-weight: bold}

/* Unique box attributes */
td.Box1 {background: #fff}
td.Box2 {background: #000}
td.Box3 {background: #ccc}
于 2012-08-30T16:31:54.827 に答える