僅為父母而不是兒童申請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。

Answer 1

使用直接后代運算符> ：

.list > ul > li { ... }

>運算符僅選擇元素作為元素的直接子元素。

但請注意，該列表項內的任何內容當然都具有列表項的背景，盡管沒有直接分配給它的任何背景顏色。

Answer 2

您可以使用>運算符，如下所示：

.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; }