html - 定位特定的 li 项目

Question

在我的代码中，我有这样的列表项；

<div id="content">
<ul class="kwicks">
<li id="home"><span class="header"></span>

在 CSS 中，我有这样的样式；

 .kwicks li{
   display: block;
   overflow: hidden;
   padding: 0;
   cursor: auto;
   }

但是，我想为每个列表项使用不同的背景图像，并且我无法专门针对每个列表项。这段代码不起作用。

.kwicks li #home{
   background: url(../images/slider_bg2.png) no-repeat left
   }

我哪里错了？

Answer 1

像这样删除空格li #home.write ：

.kwicks li#home{
   background: url(../images/slider_bg2.png) no-repeat left
   }

Answer 2

选择器

.kwicks li #home {}

假定以下标记结构：

<ul class="kwicks">
    <li>
        <span id="home" class="header"></span>
    </li>
</ul>

您可能想要的是：（在 li 和#home 之间没有空格）

.kwicks li#home {}

甚至更好（从性能的角度来看）：

#home {}

ID 是唯一的，因此您无需使用它指定类或元素。