1

我有一个 4 项菜单,每个菜单都显示项目的名称以及导航图标(使用 css sprite)。这是我的标记/ 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 中的级联来用更少的代码获得您想要的效果。

应用.selectedli然后去双班。

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 会被简化,就像这样(没有第二类)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 回答