HTML li class=youarehere 不工作答案

【问题标题】：HTML li class=youarehere not workingHTML li class=youarehere 不工作
【发布时间】：2015-10-28 03:27:30
【问题描述】：

我正在做一个 HTML 网站，我有一个主菜单 - Home、About 等。
我有几个 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 也不想使用任何其他脚本，但为什么这不起作用？

【问题讨论】：

.header #nav ul li.youarehere a? jsfiddle.net/soledar10/ecfgsv13
不，我不想改变 a 颜色。没关系，有人已经为我回答了:)

标签： html css class html-lists

【解决方案1】：

您只需要删除 li 或将 .youarehere 仅与 li 一起放置：

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

【讨论】：

【解决方案2】：

嗨，现在你的 define 在你的 css 这个.header #nav ul li .youarehere 但实际上你定义了这个.header #nav ul li.youarehere 因为你申请这个类li.

像这样

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

==================================

演示

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

<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>

【讨论】：

【解决方案3】：

删除li和.youarehere之间的空格

像这样 -

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

【讨论】：