HTML li class=你在这里不工作

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

你好现在你的 define 在你的 css 这个 .header #nav ul li .youarehere 但是 实际上 你定义这个 .header #nav ul li.youarehere 因为你在 li 中应用到这个 class .

像这样

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

Answer 2

去掉li和.youarehere之间的space

像这样-

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

Answer 3

你只需要删除 li 或放置 .youarehere 只是带 li 而没有 space :

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

HTML li class=你在这里不工作

HTML li class=youarehere not working

html

css

class

html-lists