HTML li class=youarehere 不工作

Question

我正在做一个 HTML 网站，我有一个主菜单 - 主页、关于等。
我有几个 html 页面，对于每个页面，我希望菜单 li 将颜色更改为 #E38400。

这是我的代码:

<div id="nav">
    <ul>
        <li class="youarehere"><a href="#"><h3>menuITEM</h3></a></li>
        <li><a href="#"><h3>menuITEM</h3></a></li>
        <li><a href="#"><h3>menuITEM</h3></a></li>
        <li><a href="#"><h3>menuITEM</h3></a></li>
        <li><a href="#"><h3>menuITEM</h3></a></li>
    </ul>
</div>

和我的 style.css 代码:

.header #nav ul li .youarehere {
    background:#E38400; border-radius:5px; color:#FFF;
    }

但第一个列表项仍然显示相同的颜色等。我既不想使用 jQuery 也不想使用任何其他脚本，但为什么这不起作用？

Answer 1

你只需要删除 li 或将 .youarehere 放在没有空格的 li 上:

.header #nav ul li.youarehere {
  background:#E38400; 
  border-radius:5px; 
  color:#FFF; 
}