不是 CSS 选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/726493/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Not CSS selectors
提问by BlaM
Is there some kind of "not" CSS selector?
是否有某种“非”CSS 选择器？
For example when I write the following line in my CSS, all input fields inside an tag with class classnamewill have a red background.
例如，当我在 CSS 中编写以下行时，类classname标签内的所有输入字段都将具有红色背景。
.classname input {
background: red;
}
How do I select all input fields that are OUTSIDE of a tag with class classname?
如何选择类classname标记之外的所有输入字段？
采纳答案by Peter Boughton
With current browser CSS support, you can't.
使用当前的浏览器 CSS 支持，您不能。
Newer browsers now support it- see Sam's answerfor more info.
较新的浏览器现在支持它 -有关更多信息，请参阅Sam 的回答。
(See other answers for the alternatives in CSS.)
（有关 CSS 中的替代方案，请参阅其他答案。）
If doing it in JavaScript/jQuery is acceptable, you can do:
如果在 JavaScript/jQuery 中这样做是可以接受的，你可以这样做：
$j(':not(.classname)>input').css({background:'red'});
回答by ultracrepidarian
Mozilla supports negation pseudo-class:
Mozilla 支持否定伪类：
:not(.classname) input {background: red;}
See also: http://developer.mozilla.org/en/Mozilla_CSS_support_chart
另见：http: //developer.mozilla.org/en/Mozilla_CSS_support_chart
回答by Sam Dutton
Note that the negation pseudo class is in the Selectors Level 3 Recommendationand works in recent versions of Firefox, Chrome and Safari (at least). Sample code below.
请注意，否定伪类位于Selectors Level 3 Recommendation 中，并且适用于最新版本的 Firefox、Chrome 和 Safari（至少）。下面的示例代码。
<html>
<head>
<title>Negation pseudo class</title>
<style type="text/css">
div {
border: 1px solid green;
height: 10px;
}
div:not(#foo) {
border: 1px solid red;
}
</style>
</head>
<body>
<div id="foo"></div>
<div id="bar"></div>
<div id="foobar"></div>
</body>
</html>
回答by Harper Shelby
Wouldn't you do that by setting the 'global' background to red, then using the classname to alter the others?
您不会通过将“全局”背景设置为红色，然后使用类名更改其他背景来做到这一点吗？
input { background: red; }
.classname input { background: white; }
回答by Daniel A. White
I would do this
我会这样做
input { /* styles outside of .classname */ }
.classname input { /* styles inside of .classname, overriding above */ }
回答by Zack The Human
There is no way to select the parent of matched elements with CSS. You would have to use JavaScript to select them.
无法使用 CSS 选择匹配元素的父元素。您必须使用 JavaScript 来选择它们。
From your question I assume you have markup that looks more or less like this:
根据您的问题，我假设您的标记或多或少是这样的：
<form class="formclassname">
<div class="classname">
<input /> <!-- Your rule matches this -->
<input /> <!-- Your rule matches this -->
</div>
<input /> <!-- You want to select this? -->
<input /> <!-- You want to select this? -->
</form>
One option is to add a class to a higher element, say the <form>, and write a rule to style all of the inputs of the form. I.E:
一种选择是将一个类添加到更高的元素，比如<form>，并编写一个规则来设置表单的所有输入的样式。IE：
.formclassname input {
/* Some properties here... */
}
Or
或者
.formclassname > input {
/* Some properties here... */
}
If you want to select them based on the fact that they are not inside of an element with a specific class, you're out of luck without the use of JavaScript.
如果您想根据它们不在具有特定类的元素内这一事实来选择它们，那么如果不使用 JavaScript，您将不走运。
回答by Dan Roberts
I think the closest you can get is to only affect direct descendants with a declaration
我认为你能得到的最接近的是只通过声明影响直系后代
This code for example will only affect input fields directly under divs with class "maincontent"
例如，此代码只会影响类“maincontent”直接在 div 下的输入字段
div.maincontent > input {
// do something
}
回答by wheresrhys
Inputs are a bit annoying because, unlike most other html elements, there isn't necessarily a way of resetting all the css properties back to their default value.
输入有点烦人，因为与大多数其他 html 元素不同，不一定有办法将所有 css 属性重置回它们的默认值。
If the styling is non-critical (ie a nice to have but doesn't affect functionality) I would use jQuery to get an array of all the inputs, check their parents, and then only carry out the styling on those outside that div. Something like:
如果样式不重要（即很好但不影响功能），我将使用 jQuery 获取所有输入的数组，检查它们的父项，然后仅对 div 之外的那些执行样式。就像是：
$('input').each(function() {
if($(this).closest('.classname') == false)
{
// apply css styles
}
});
(By the way, I'm no jQuery expert, so there might be some errors in the above, but in principle something like this should work)
（顺便说一下，我不是 jQuery 专家，所以上面可能有一些错误，但原则上这样的事情应该可行）
