Question

正如您所看到的，我很难在标题中表达问题。

我有一个ul，其中包含li个ul，其中包含li个li。

我希望仅第一个ul元素，而不是第二个li中的元素。

如果您查看this fiddle（或下面的代码），我想更改第1项的颜色，而不是第1项的子项目。如果没有将类附加到<div class="foo"> <ul> <li> item 1 <ul> <li>sub item 1</li> </ul> </li> </ul> </div>元素，这是否可能？

{{1}}

Answer 1

会有这样的帮助吗？

.foo ul li {
    color: red;
}
.foo ul li ul li {
    color:green;
}

Answer 2

演示 - http://jsfiddle.net/victor_007/6fqbc4ud/6/

:not(li) > ul > li  {
    color: red;
}

ul li{
    color:green;
}

Answer 3

.foo  ul li { color: black; }
.foo  > ul > li { color: red; }

Demo

Answer 4

为此，请使用child combinators selector，它仅选择直接孩子。

乍一看，您可以使用ul>li，但这也会选择第二级列表项，因为它们也是列表的直接子项。

所以你需要定义一个起点，在这种情况下是父（div）。

我现在看到你自己已经有了答案。然而，由于你没有宣布默认情况，因此它并不适用于你的小提琴。颜色。这意味着第二级列表项继承了它的父级颜色。

li {
    color: blue;
}
.foo>ul>li {
    color: red;
}

updated Fiddle

高阶li的CSS选择器

4 个答案: