CSS: use not: 不仅要排除div，还要排除其中的所有div？答案

【问题标题】：CSS: use not: to exclude not only div, but also all the div within it?CSS: use not: 不仅要排除div，还要排除其中的所有div？
【发布时间】：2013-06-30 11:04:37
【问题描述】：

我想使用 not: 所以它将排除 div2 元素中的所有 p 元素。这是html文件：

<body>
    <p> not in any div </p>
    <div id="div1">
        <p> div1 text1</p>
        <div>
            <p> div2 inner text2</p>
            <div>
                <p> div1 innermost text3</p>
                <p> div1 innermost text4</p>    
            </div>
        </div>
    </div> 

    <div id="div2">
        <p> div2 text1</p>
        <div>
            <p> div2 inner text2</p>
            <div>
                <p> div2 innermost text3</p>
                <p> div2 innermost text4</p>    
            </div>
        </div>
    </div>

    <div id="div3">
        <p> div3 text1</p>
        <div>
            <p> div3 inner text2</p>
            <div>
                <p> div3 innermost text3</p>
                <p> div3 innermost text4</p>    
            </div>
        </div>
    </div>
</body>

这是我使用的 CSS 文件，（显然）它不能正常工作：

div:not(#div2) p{
    color:green;
}

这仅排除了 p 元素：“div2 text1”，但不包括 div2 中的其他三个：

我相信这是因为“not:”只排除了 div2 div 而不是其中的两个 div。

如何更改 ":not" 中的上下文，使其不仅包括 div2 div，还包括 div2 中的所有 div？

使用 jQuery 可以轻松实现我想要做的事情：

$('div p').not('#div2 p');

总结一下：如何更改此 css 行：

div:not(#div2) p{

所以它会和 jQuery 行一样（选择）吗？或者换句话说：

选择 div 内的所有 p 元素，除非它是 div2。或者换句话说：

选择包含单词 div1 或 div3 的所有 p 元素（但不使用此信息）

【问题讨论】：

div 真的是 3 还是只是一个例子？
我只需将一个类添加到需要有绿色文本的包含 div 中。使用类作为选择器。跳过这一切的头痛：不是生意。
对 Woodifer，我有 30 个这样的 div，我不想为每个 div 添加一个类
致 Jon：真正的 html 文件中总共有 30 个 div
对乔恩：是的——我可以那样做。但我只是想学习如何使用 :not thingy。如您所见，问题是如何使用 :not 命令，（而不是如何使用其他方式解决问题）Ty。

标签： css

【解决方案1】：

你试过子选择器吗？

body > div:not(#div2)
{
    color:orange
}

这将仅针对作为正文的直接后代的 div。小提琴：

http://jsfiddle.net/Xk5rb/

【讨论】：

请注意，这仅适用于默认值为inherit 的属性，例如color（不适用于border），因为您在技术上并未选择有问题的div。
@Jon - 是的，是的。尽管您可以将 p 附加到该选择器 - body > div:not(#div2) p 如果您特别需要定位它并且它仍然可以工作。 :-)
@Ben：这更像是 :-)