不是 CSS 选择器

是否有某种“非”CSS 选择器？

例如，当我在 CSS 中编写以下行时，类 类名的标记中的所有输入字段都将具有红色背景。

.classname input {
background: red;
}

如何选择 类名类标记的所有 OUTSIDE 输入字段？

67435 次浏览
小开

无法使用 CSS 选择匹配元素的父元素。您必须使用 JavaScript 来选择它们。

根据您的问题，我假设您有这样的标记:

<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>

一种选择是向较高的元素(比如 <form>)添加一个类，并编写一个规则来设置表单的所有输入的样式。即:

.formclassname input {
/* Some properties here... */
}

或者

.formclassname > input {
/* Some properties here... */
}

如果您希望根据它们不在具有特定类的元素中这一事实来选择它们，那么如果不使用 JavaScript，您就不走运了。

小开

为此，您是否应该将“ global”背景设置为红色，然后使用类名来更改其他的背景？

input { background: red; }
.classname input { background: white; }
小开

我会这么做

input { /* styles outside of .classname */ }
.classname input { /* styles inside of .classname, overriding above */ }
小开
最佳答案


使用当前浏览器的 CSS 支持，您不能。

新的浏览器现在支持它-更多信息参见 Sam 的回答。

(有关 CSS 中的替代方案，请参阅其他答案。)


如果可以使用 JavaScript/jQuery，你可以这样做:

$j(':not(.classname)>input').css({background:'red'});
小开

我认为最接近的方法就是通过一个声明来影响直系后代

例如，这段代码只会直接影响“ maincontent”类 div 下的输入字段

div.maincontent > input {
// do something
}
小开

输入有点烦人，因为与大多数其他 html 元素不同，没有必要将所有 css 属性重新设置为它们的默认值。

如果样式是非关键的(即一个很好的有，但不影响功能) ，我会使用 jQuery 获得一个数组的所有输入，检查他们的父母，然后只执行那些外部的 div 的样式。比如:

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

(顺便说一下，我不是 jQuery 专家，所以上面可能有一些错误，但原则上这样的东西应该可以工作)

小开

Mozilla 支持 否定伪类否定伪类:

:not(.classname) input {background: red;}

参见: http://developer.mozilla.org/en/Mozilla_CSS_support_chart

小开

请注意，否定伪类在 选择程序第三级建议中，可以在最新版本的 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>

提交答案