选择子元素而不选择孙子元素

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元素，而不选中孙子元素。

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

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

- HNikolas

Answer 1

使用 CSS 大于号 >（子选择器）：

#content > p

子选择器用于匹配某个元素的子元素。

- CD..

---

奇怪的是，我在本地文件中尝试了完全相同的代码，但什么也没发生，而其他样式确实起作用......是我的问题。 - Bas Slagter

谢谢，它完全符合我的要求。我还注意到问题帖子中提供的示例代码中有一个小错误，并已修复。 - HNikolas

Answer 2

您还可以为更深层次的<p>元素设置另一种样式，覆盖您已经指定的样式。像这样：

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

- Bas Slagter

---

是的，这是一种可能性，它可以正常工作，但是我不想覆盖我在第一个子元素中设置的所有内容，并且希望col1和col2 p元素使用在更高层次（例如body）定义的默认值。 - HNikolas