1

4つのアイテムメニューがあり、それぞれにアイテムの名前とナビゲーションアイコン（cssスプライトを使用）が表示されます。これが私のマークアップ/cssです： 

ul { list-style:none outside none; }
ul li {
    background-color:#000;
    float:left;
    height:100px;
}
ul li a {
    background-image:url('sprite.png');
    color:#FFF;
    display:block;
    height:10px;
    padding-top:20px;
    text-align:center;
    width:50px;
}

ul li.a a { background-position:0px 0px; }
ul li.b a { background-position:-50px 0px }
ul li.c a { background-position:-100px 0px }
ul li.d a { background-position:-150px 0px }    
-----------------------------------------------------------------
<ul>
    <li class="a"><a href="a">A</a></li>
    <li class="b"><a href="b">B</a></li>
    <li class="c"><a href="c">C</a></li>
    <li class="d"><a href="d">D</a></li>
</ul>

これはすべて正常に機能しますが、現在選択されているアイテムに別の効果を表示したいとします。具体的には、背景色、アイコン、テキストの色を変えたいと思っています。これを行うための最良の方法は何ですか？私が考えることができる唯一の方法は、<li>私が具体的に異なる背景色を指定する「選択された」クラスを追加し、また<a>、異なる背景画像と異なる色のテキストを指定する「選択された」クラスを追加することです。
何かのようなもの： 

ul li.selected { background-color:#FFF; }
ul li a { color:#000; }
ul li.a a.selected { background-position:-250px 0px; }
ul li.b a.selected { background-position:-300px 0px; }
ul li.c a.selected { background-position:-350px 0px; }
ul li.d a.selected { background-position:-400px 0px; }
--------------------------------------------------------------------------
<ul>
    <li class="a selected"><a class="selected" href="a">A</a></li>
    <li class="b"><a href="b">B</a></li>
    <li class="c"><a href="c">C</a></li>
    <li class="d"><a href="d">D</a></li>
</ul>


誤解しないでください。私はこの方法でそれを行うことができますが、それが想定されている方法ではないように感じます。

4

1 に答える 1

0

CSSのカスケードを使用すると、少し少ないコードで必要な効果を得ることができます。

にを適用して.selectedからli、ダブルクラスに進みます。

ul li.selected { background-color:#FFF; }
ul li.a.selected a { background-position:-250px 0px; }
ul li.b.selected a { background-position:-300px 0px; }
ul li.c.selected a { background-position:-350px 0px; }
ul li.d.selected a { background-position:-400px 0px; }

基本的に、あなたはクラスを連鎖させています。

このように、とのselected両方にクラスを追加する必要はありません。あなたのHTMLはそのように単純化されます（2番目のクラスはありません）liaselected

<ul>
    <li class="a selected"><a href="a">A</a></li>
    <li class="b"><a href="b">B</a></li>
    <li class="c"><a href="c">C</a></li>
    <li class="d"><a href="d">D</a></li>
</ul>

仕様からの詳細：

http://www.w3.org/TR/CSS2/selector.html#class-html

于 2012-04-10T02:29:35.077 に答える