css:not()，选择器和选择后代 [英] css :not(), selectors and selecting descendants
问题描述
让我说:
<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:
What i want to do is select all the elements with class="para" but exclude those that are descendants of those elements that have a class="ds". I have this 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)中运行.有什么想法吗?
So i assume i can only have simple selectors as part of :not(S), i can't have :not (X Y). I am running in both chrome (18.0.1025.162 m) and firefox (10). Any ideas?
注意:请不要把查询当作一个大问题的一部分，我有一些代码(以gwt为单位)正在从dom中选择元素列表(例如，带有class ="para"的元素).但是我发现了一个错误，该错误要求排除属于特定元素集的后代元素(例如，具有class ="ds"的元素).
Note: Please not that the query is part of a bigger issue, i have some code (in gwt) that is selecting a list of elements (e.g. with class="para") from the dom. However i have found a bug that requires the exclusion of elements that are descendants of a particular set of elements (e.g those with a class="ds").
推荐答案
规范说，您可以在:not中有任何简单选择器，其中
The spec says that you can have any simple selector inside :not, where
简单选择器可以是类型选择器，通用选择器， 属性选择器，类选择器，ID选择器或伪类.
A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.
是的，您不能有后代选择器:not(X Y).还有一个问题是，在使用后代选择器时，您只能表达正数(当X的祖先包括Y时")，而不能表达负数(当X的祖先不包括
So yes, you can't have a descendant selector :not(X Y). There is also the problem that when using the descendant selector you can only express positives ("when X's ancestors include a Y") and not negatives ("when X's ancestors do not include a Y");
最实用的解决方案是 reverse CSS逻辑，以便您要表达的否定词变为肯定词:
The most practical solution would be to reverse the CSS logic so that the negative you want to express becomes a positive:
.ds .para { background:gold; }
.para { background: green }
查看实际效果 .
See it in action.
这篇关于css:not()，选择器和选择后代的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
