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 中的级联来用更少的代码获得您想要的效果。

应用.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 会被简化，就像这样（没有第二类）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 回答