仅为父元素应用CSS而不影响子元素

Question

我有一个无序列表，像这样：

<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。

- Robz

---

.list > ul > li - > 选择器仅选择它前面的元素的直接子元素。 - CBroe

Answer 1

使用直接后代选择器>来实现：

.list > ul > li { ... }

>运算符选取的是在它之前的元素的直接子元素。

但需要注意的是，列表项中的任何内容都会继承该列表项的背景色，即使没有直接分配任何背景颜色。

- Guffa

Answer 2

或者，现在您可以这样做：

li:not(li li) { background: #ccc; }

- pro-tester

Answer 3

您可以使用 > 运算符来实现，像这样：

.list > ul > li{
  background:#ccc; 
}

- Johan

Answer 4

唯一的做法是像这样：

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

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

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

:)

- Kees Sonnema