仅使用css选择启动父项的子项

Question

我认为这是一个非常简单的问题,但我似乎没有把它弄好.我想使用css设置列表样式,但我想要影响"顶级<li>元素.

现场看我的问题

HTML

<ul class="test">
<li>1</li>
<li>2
    <ul>
        <li>2.1 - should not be red</li>
        <li>2.2 - should not be red</li>
    </ul>
</li>
<li>3</li>

CSS

.test > li {
     color: #f00;
}

我究竟做错了什么？非常感谢!

Answer 1

没错.你没有设置color其他li的,所以它继承自父.

DEMO

.test > li {
    color: #f00;
}
li {
    color: #0f0;
}