CSS li 后台问题

Question

我有一个水平导航，我正在尝试为 li 类使用图像，但是，当我尝试 .nav li .home{background:img url;} 图像不显示时，如何我可以解决这个问题吗？

CSS

.nav {
    position: absolute;
    height: 20px;
    width: 100%;
    background-image: url(images/nav.png);
    background-repeat: repeat;
    left: 0px;
    top: 0px;
    margin: 0px;
    padding: 0px;
    z-index: 3;
}
.nav li {
    padding-left: 10px;
    list-style-type: none;
    margin-top: auto;
    margin-bottom: auto;
}
.nav li a {
    margin-top: 5px;
    margin-bottom: 5px;
}
.nav li.home {
    background: url(images/home.png);
}

HTML:

<ul class="nav">
<li>
<a herf="#" class="home">home</a>
</li>
</ul>

Answer 1

I'm trying to use images for the li classes

.nav li .home 不针对 li。它将以 li 中类名为“home”的元素为目标。没有HTML源代码，我无法给出确定的解决方案。但如果我猜的话，你的 HTML 是这样的:

<ul>
 <li class="home">
  <a href="index.html">home</a>
 </li>
 <li class="about">
  <a href="about.html">about</a>
 </li>
</ul>

在这种情况下，您可以将 CSS 更改为:

.nav li.home

通过删除空格，li 是有针对性的。