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。

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

我认为这样做的一种方法是向第一个孩子添加一个类，然后通过它应用属性。

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

Answer 1

使用CSS大于号>（Child selectors）：

#content > p

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

Answer 2

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

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

选择儿童元素，但不是孙子

2 个答案: