46

我有一个这样的无序列表：

<div class="list">
<ul>
    <li>
        list1
        <ul>
            <li>Sub list1</li>
            <li>Sub list2</li>
            <li>Sub list3</li>
        </ul>
    </li>
    <li>
        list2
        <ul>
            <li>Sub list1</li>
            <li>Sub list2</li>
            <li>Sub list3</li>
        </ul>
    </li>
</ul>
</div>

我现在只想将 CSS 应用于第一个列表，而不是它的子列表ul和li. 我尝试了以下方法：

.list ul li{
background:#ccc;
}

...但背景颜色适用于所有列表。应该做些什么来改变只有父母而不是孩子的CSS。

4

4 回答 4

47

为此使用直接后代运算符>：

.list > ul > li { ... }

运算符仅选择作为>其之前元素的直接子元素的元素。

但是请注意，该列表项中的任何内容当然都会具有列表项的背景，尽管没有直接为其分配任何背景颜色。

于 2013-05-28T08:21:31.867 回答
7

为此，您可以使用 > 运算符，如下所示：

.list > ul > li{
  background:#ccc; 
}
于 2013-05-28T08:21:53.457 回答
6

或者，您现在可以执行以下操作：

li:not(li li) { background: #ccc; }
于 2018-12-11T00:51:31.743 回答
4

这样做的唯一方法是：

.List > ul > li { background-color: #ccc; }

如果您只想将 bgcolor 应用于 ul，只需执行以下操作：

.List > ul { background-color: #ccc; }

:)

于 2013-05-28T08:25:43.580 回答