有无序列表的CSS问题

Question

Html标记

<ul>
 <li> <a href="...">parent</a>
   <ul><li> <a href="...">child</a> </li></ul>
 </li>
</ul>

我想做的是仅将背景应用于父李。

ul li a{
    background:url(images/nav/divider.jpg) right bottom no-repeat;
}

此样式适用于所有li-s，不仅适用于父级。

如何将css规则仅应用于父li-s？

Answer 1

您只需要第一个子选择器：

#foo > li{
    ...
}

这表示“仅在#id之后选择LI元素”。

修改的 我应该指出，您需要使用ID或类来定位父UL项目。

编辑2 我看到您更新了HTML示例。删除了我的嵌套HTML。

Answer 2

从您不寻常的HTML中猜测：

ul li.parent a {
    background:url(images/nav/divider.jpg) right bottom no-repeat;
    display:block;
    width:50px;
    height:15px;
}

相应地添加您自己的值。

Answer 3

您有两个基本选择：

1. 使用CSS设置li元素的样式，然后覆盖子li元素的样式，或
2. 为父级指定id，或 a 父级元素，然后更具体地选择

---

1

ul li {
    background-image: url(path.to/image.png);
}

ul li li {
    background-image: none;
}

JS Fiddle demo

2

<ul id="uniqueID">
    <li>first-level</li>
    <li>
         <ul>
             <li>Second-level</li>
         </ul>
    </li>
</ul>

并使用CSS：

#uniqueID > li {
    background-image: url(path.to/background-image.png);
}

JS Fiddle demo

值得注意的是，默认情况下，许多元素或CSS重置都被设计为具有透明背景。这意味着您可能必须覆盖父li元素的样式，无论如何：

#uniqueID > li {
    background-image: url(path.to/background-image.png);
}
li li {
     background-image: none;
}

JS Fiddle demo