应用css只有父母，但不适用于孩子 [英] applying css for only parent but not to children

问题描述

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

I have an unordered list like this:

<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 。我尝试了以下操作：

I now want to apply CSS only for the first list but not its children ul and li. I've attempted the following:

.list ul li{
background:#ccc;
}

...但背景颜色应用于所有列表。

...but the background color is applied to all lists. What should be done to change the CSS of only parent but not the children.

推荐答案

使用直接后代运算符> ：

.list > ul > li { ... }

> 运算符只选择元素之前的元素的直接子元素。

The > operator selects only elements that are direct children of the element(s) before it.

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

Note however, anything inside that list item will of course have the background of the list item despite not having any background color directly assigned to it.

这篇关于应用css只有父母，但不适用于孩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！