html - 使用 css 选择器仅选择无序列表的父元素减去子列表？

Question

只是尝试只为第一个 ul li a 设置样式，而不为子 ul li a 设置样式。我意识到在 CSS 中没有父选择器这样的东西并且可能有充分的理由，那么如果不为所有 li 分配一个类，我将如何实现这一点？也许这是不可能的，这就是我问的原因。这是 HTML。

<div id="myDiv">
    <h2>Headline 2</h2>

    <div>
        <p>Some Paragraph 1</p>
        <ul class="list">
            <li><a href="#">List 1 Item 1 (=)</a></li>
            <li><a href="#">List 1 Item 2 (=)</a>
                <ul>
                    <li><a href="#">List 1 Item 2a</a></li>
                    <li><a href="#">List 1 Item 2b</a></li>
                </ul>
            </li>
            <li><a href="#">List 1 Item 3 (=)</a></li>
        </ul>
    </div>

    <p>Some paragraph 2</p>
    <div>
        <ul>
            <li><a href="#">List 2 Item 1</a></li>
            <li><a href="#">List 2 Item 2</a></li>
        </ul>
    </div>
</div>

这是我想要的目标

再次，我意识到我可以向所有类添加类并获得我想要的结果，我只是想知道是否有其他方法。

使用 css 选择器，这是我如何定位子列表(不是我想要的)

ul.list li > ul li a{
   ...
}

针对第一个ul加上子列表(不是我想要的)

ul.list > li a{
   ...
}

这是一个方便你的 fiddle 。
http://jsfiddle.net/94e2fo30/

Answer 1

第一个列表和它的子列表之间的区别在于第一个列表前面有一个p。

p + ul > li > a {
    color: red;
}

将给予: