选择子元素但不选择孙元素

Question

我有以下简化的代码：

<div id="content">
    <p>text</p>

    <div id="container">
        <div id="col1">
            <p>text</p>
        </div>
        <div id="col2">
            <p>text</p>
        </div>
    </div>

    <p>text</p>
    </div>
</div>

每当我为 CSS 文件中的 #content p 元素设置一些值时，这些更改也适用于 #col1 p 和 <代码>#col2 p。

我想做的是仅选择 #content div 的子 p 元素，而不选择孙 p 元素。

我想，一种方法是向第一个子级添加一个类，然后通过它应用属性。

在 CSS2 或 CSS3 中是否有更好的方法？

Answer 1

使用 CSS 大于号 > (Child选择器）：

#content > p

当某个元素是某个元素的子元素时，子选择器就会匹配。

Answer 2

您还可以为更深的

元素设置另一种样式，以覆盖您已指定的样式。就像这样：

#content p { color: red; }
#content div p { color: black; }