无论标签名称如何，只选择元素的直接子元素

Question

我有一个简单的结构，如下所示：

<p class="container">
    <h2>...</h2>
    <p class="lead">...</p>
    <p>...</p>
    <div class="subcontainer">
        <p>...</p>
        <p>...</p>
    </div>
</p>

我需要选择h2，p.lead和p。由于p.container可能包含任何标记，因此简单的硬列表不是一个好的解决方案（尽管可以接受）。

那么什么是CSS选择器语法，允许我选择p.container的孩子而不是他们的孩子（例如不是p.subcontainer *）？

Answer 1

使用Universal Selector *，并结合Child Selector >：

p.container > * {
    /*style*/
}

如果您不想选择subcontainer，请使用:not()选择器将其排除：

p.container > *:not(.subcontainer) {
    /*style*/
}