blocks|key|1841256|text|Mozilla支持negation+pseudo-class|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1841257|:not(.classname)+input+{background:+red;}|code-block|syntax|javascript|1841258|另请参阅：http://developer.mozilla.org/en/Mozilla_CSS_support_chart|1841259|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/css3-selectors/#negation|1|http://developer.mozilla.org/en/Mozilla_CSS_support_chart^0|9|L|0|0|0|5|1L|1|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|K|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|T]]]]

<p>Mozilla supports <a href="http://www.w3.org/TR/css3-selectors/#negation" rel="noreferrer">negation pseudo-class</a>:</p>

<pre><code>:not(.classname) input {background: red;}
</code></pre>

<p>See also: <a href="http://developer.mozilla.org/en/Mozilla_CSS_support_chart" rel="noreferrer">http://developer.mozilla.org/en/Mozilla_CSS_support_chart</a></p>


blocks|key|1841403|text|请注意，negation伪类位于Selectors+Level+3+Recommendation中，并且可以在最新版本的火狐、Chrome和Safari+(至少)中运行。下面是示例代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1841404|<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>|code-block|syntax|javascript|1841405|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/css3-selectors^0|G|W|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>Note that the negation pseudo class is in the <a href="http://www.w3.org/TR/css3-selectors">Selectors Level 3 Recommendation</a> and works in recent versions of Firefox, Chrome and Safari (at least). Sample code below.</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Negation pseudo class&lt;/title&gt;
&lt;style type="text/css"&gt;
    div {
    border: 1px solid green;
    height: 10px;
    }
    div:not(#foo) {
    border: 1px solid red;
    }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="foo"&gt;&lt;/div&gt;
    &lt;div id="bar"&gt;&lt;/div&gt;
    &lt;div id="foobar"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|2055195|text|你不会通过将“全局”背景设置为红色，然后使用类名来改变其他的吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2055196|input+{+background:+red;+}
.classname+input+{+background:+white;+}|code-block|syntax|javascript|2055197|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Wouldn't you do that by setting the 'global' background to red, then using the classname to alter the others?</p>

<pre><code>input { background: red; }
.classname input { background: white; }
</code></pre>


blocks|key|1840980|text|我会这么做的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1840981|input+{+/*+styles+outside+of+.classname+*/+}
.classname+input+{+/*+styles+inside+of+.classname,+overriding+above+*/+}|code-block|syntax|javascript|1840982|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I would do this</p>

<pre><code>input { /* styles outside of .classname */ }
.classname input { /* styles inside of .classname, overriding above */ }
</code></pre>


blocks|key|2055128|text|无法使用CSS选择匹配元素的父元素。您必须使用JavaScript来选择它们。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2055129|根据您的问题，我假设您的标记或多或少类似于：|2055130|<form+class="formclassname">
++++<div+class="classname">
++++++++<input+/>++
++++++++<input+/>++
++++</div>
++++<input+/>++
++++<input+/>++
</form>|code-block|syntax|javascript|2055131|一种选择是向更高的元素添加一个类，比如<form>，然后编写一条规则来样式化表单的所有输入。即：|offset|length|style|CODE|2055132|.formclassname+input+{
++/*+Some+properties+here...+*/
}|2055133|或|2055134|.formclassname+>+input+{
++/*+Some+properties+here...+*/
}|2055135|如果您想要根据它们不在具有特定类的元素中这一事实来选择它们，那么如果不使用JavaScript，您就不走运了。|2055136|entityMap^0|0|0|0|J|6|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@$K|12|L|13|M|N]]|9|@]|A|$]]|$1|O|3|P|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|15|8|@]|9|@]|A|$]]|$1|S|3|T|5|F|7|16|8|@]|9|@]|A|$G|H]]|$1|U|3|V|5|6|7|17|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|X|$]]

<p>There is no way to select the parent of matched elements with CSS. You would have to use JavaScript to select them.</p>

<p>From your question I assume you have markup that looks more or less like this:</p>

<pre><code>&lt;form class="formclassname"&gt;
    &lt;div class="classname"&gt;
        &lt;input /&gt;  &lt;!-- Your rule matches this --&gt;
        &lt;input /&gt;  &lt;!-- Your rule matches this --&gt;
    &lt;/div&gt;
    &lt;input /&gt;  &lt;!-- You want to select this? --&gt;
    &lt;input /&gt;  &lt;!-- You want to select this? --&gt;
&lt;/form&gt;
</code></pre>

<p>One option is to add a class to a higher element, say the <code>&lt;form&gt;</code>, and write a rule to style all of the inputs of the form. I.E:</p>

<pre><code>.formclassname input {
  /* Some properties here... */
}
</code></pre>

<p>Or</p>

<pre><code>.formclassname &gt; input {
  /* Some properties here... */
}
</code></pre>

<p>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.</p>


blocks|key|1841085|text|我认为您能得到的最接近的结果是只影响具有声明的直系后代|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1841086|例如，此代码将只影响直接位于类为"maincontent“的div下的输入字段。|1841087|div.maincontent+>+input+{
++//+do+something
}|code-block|syntax|javascript|1841088|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I think the closest you can get is to only affect direct descendants with a declaration</p>

<p>This code for example will only affect input fields directly under divs with class "maincontent"</p>

<pre><code>div.maincontent &gt; input {
  // do something
}
</code></pre>


blocks|key|1841163|text|输入有点烦人，因为与大多数其他html元素不同，不一定有办法将所有css属性重置为默认值。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1841164|如果样式是非关键的(即很好，但不影响功能)，我会使用jQuery来获取所有输入的数组，检查它们的父类，然后只在该div之外的那些输入上执行样式。类似于：|1841165|$('input').each(function()+{
+++++if($(this).closest('.classname')+==+false)
+++++{
+++++++++++//+apply+css+styles
+++++}
});|code-block|syntax|javascript|1841166|(顺便说一句，我不是jQuery专家，所以上面可能有一些错误，但原则上应该可以这样做)|1841167|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>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.</p>

<p>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:</p>

<pre><code>$('input').each(function() {
     if($(this).closest('.classname') == false)
     {
           // apply css styles
     }
});
</code></pre>

<p>(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)</p>


<p>Is there some kind of "not" CSS selector?</p>

<p>For example when I write the following line in my CSS, all input fields inside an tag with class <em>classname</em> will have a red background.</p>

<pre class="lang-css prettyprint-override"><code>.classname input {
  background: red;
}
</code></pre>

<p>How do I select all input fields that are OUTSIDE of a tag with class <em>classname</em>?</p>


Not CSS selectors

有没有某种“非”CSS选择器？例如，当我在CSS中编写以下代码行时，带有类classname的标记内的所有输入字段都将具有红色背景。.classname input {  background: red;}如何选择具有类classname的标记外部的所有输入字段

问非CSS选择器
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问非CSS选择器EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问非CSS选择器
EN