18

假设我有：

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test for :not</title>
        <link rel="stylesheet" type="text/css" href="Test.css" />
    </head>
    <body>
        <div class="a">
            <p class="para">This line should be green.</p>
        </div>
        <div class="a">
            <p class="para">This line should also be green.</p>
            <div class="ds">
                <p class="para">This is another line that should be yellow</p>
            </div>
        </div>
    </body>
</html>

我想选择所有元素，class="para"但排除那些是那些元素的后代的元素class="ds"。我有这个 CSS：

.ds { color: grey; border-style:solid; border-width:5px;}
                
.para {color:yellow;}
                
.para:not(.ds .para) {color:green; border-style:solid; border-width:5px;} //not working

所以我假设我只能有简单的选择器作为 的一部分:not(S)，我不能有:not (X Y). 我在 Chrome (18.0.1025.162 m) 和 Firefox (10) 中运行。有任何想法吗？

请注意：查询是更大问题的一部分，我有一些代码（在 gwt 中class="para"）从 DOM 中选择元素列表（例如 with ）。但是，我发现了一个错误，该错误需要排除作为特定元素集的后代的元素（例如带有 a 的元素class="ds"）。

4

3 回答 3

15

规范说你可以在里面有任何简单的选择器:not，其中

简单选择器可以是类型选择器、通用选择器、属性选择器、类选择器、ID 选择器或伪类。

所以是的，你不能有后代选择器:not(X Y)。还有一个问题是，当使用后代选择器时，您只能表示正数（“当 X 的祖先包含 Y”）而不能表示负数（“当 X 的祖先不包含 Y”）；

最实用的解决方案是反转CSS 逻辑，使您想要表达的否定变为肯定：

.ds .para { background:gold; }
.para { background: green }

看到它在行动。

于 2012-04-19T11:53:04.963 回答
4

具有类“para”的元素不包括具有类“ds”的元素的直接子元素是：

*:not(.ds) > .para
于 2012-04-19T11:51:56.957 回答
1

我认为您可能以错误的方式接近它。正常.para匹配是绿色的，其中的匹配.ds是黄色的。可以肯定的是，按照您的方式，您需要再次删除边框，但这不是问题。

.ds { color: grey; border-style:solid; border-width:5px;}

.para {color:green; border-style:solid; border-width:5px;}

.ds .para {color:yellow; border-style: none; }

这符合我认为解释格式的自然方式。

于 2012-04-19T11:55:14.683 回答