Question

我正在做一个HTML网站，我有一个主菜单 - Home，About etc 我有几个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

您好定义 css 此.header #nav ul li .youarehere但实际您定义此.header #nav ul li.youarehere因为您的申请在li。

中加入此课程

就像这样

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

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

<强>演示

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

删除li和.youarehere

之间的空格像这样 -

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

Answer 3

你只需要删除li或放置。只是在没有空间的情况下才能使用li：

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

HTML li class =你还没有工作

3 个答案: