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应用CSS。我尝试过以下方法：

.list ul li{
background:#ccc;
}

...但背景颜色应用于所有列表。应该怎么做才能改变只有父级而不是子级的CSS。

Answer 1

使用直接后代运算符>：

.list > ul > li { ... }

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

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

Answer 2

您可以使用＆gt;运营商，像这样：

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

Answer 3

这样做的唯一方法就是：

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

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

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

：）

Answer 4

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

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

仅为父母而不是儿童申请css

4 个答案: