Question

我有一个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>

这不会让我错，我可以这样做，但我觉得这不是它应该做的方式。

Answer 1

您可以使用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和li添加a课程。您的HTML将被简化，如此（没有第二个selected类）

<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

如何显示所选的水平菜单

1 个答案: