2

我想使用 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>

这是我使用的 CSSfile，（显然）它运行不正常：

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 元素（但不使用此信息）

4

1 回答 1

6

您是否尝试过子选择器？

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

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

http://jsfiddle.net/Xk5rb/

于 2013-07-02T22:05:01.110 回答