Question

让我们说：

            <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

所以我假设我只能选择简单的选择器：不是（S），我不能：不是（X Y）。我在chrome（18.0.1025.162 m）和firefox（10）中运行。有什么想法吗？

注意：请注意，查询是更大问题的一部分，我有一些代码（以gwt为单位）从dom中选择元素列表（例如，使用class =“para”）。但是，我发现了一个错误，需要排除作为特定元素集的后代的元素（例如具有class =“ds”的元素）。

Answer 1

类别为“para”的元素（不包括具有“ds”类元素的直接子元素的元素）：

*:not(.ds) > .para

Answer 2

:not内:not(X Y)内可以包含任何简单选择器的地方

一个简单的选择器是一个类型选择器，通用选择器，属性选择器，类选择器，ID选择器或伪类。

所以是的，你不能拥有后代选择器.ds .para { background:gold; } .para { background: green }。还有一个问题是，当使用后代选择器时，你只能表示正面（“当X的祖先包含Y”时）而不是负数（“当X的祖先不包含Y”时）; < / p>

最实际的解决方案是反转 CSS逻辑，以便你想表达的负面成为积极的：

{{1}}

<强> spec says

Answer 3

我认为你可能会以错误的方式接近它。普通.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; }

这符合我所看到的解释格式的自然方式。

css：not（），选择器和选择后代

3 个答案: