针对特定的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。写如下：

.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是唯一的，因此您无需使用它指定类或元素。