72

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

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

.classname input {
  background: red;
}

如何选择类classname标记之外的所有输入字段？

4

8 回答 8

53


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

较新的浏览器现在支持它 - 有关更多信息，请参阅Sam 的答案。

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


如果在 JavaScript/jQuery 中这样做是可以接受的，你可以这样做：

$j(':not(.classname)>input').css({background:'red'});
于 2009-04-07T16:16:57.447 回答
32

Mozilla 支持否定伪类：

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

另见：http: //developer.mozilla.org/en/Mozilla_CSS_support_chart

于 2009-07-10T18:14:28.793 回答
30

请注意，否定伪类在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>
于 2011-06-09T14:58:42.170 回答
24

你不会通过将“全局”背景设置为红色，然后使用类名来改变其他人来做到这一点吗？

input { background: red; }
.classname input { background: white; }
于 2009-04-07T16:09:46.390 回答
10

我会这样做

input { /* styles outside of .classname */ }
.classname input { /* styles inside of .classname, overriding above */ }
于 2009-04-07T16:11:46.867 回答
1

无法使用 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>，并编写一个规则来设置表单的所有输入的样式。IE：

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

或者

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

如果您想根据它们不在具有特定类的元素内的事实来选择它们，那么如果不使用 JavaScript，您将不走运。

于 2009-04-07T16:09:23.380 回答
0

我认为您能得到的最接近的方法是仅通过声明影响直系后代

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

div.maincontent > input {
  // do something
}
于 2009-04-07T16:18:47.053 回答
0

输入有点烦人，因为与大多数其他 html 元素不同，不一定有办法将所有 css 属性重置为默认值。

如果样式是非关键的（即很好但不影响功能），我会使用 jQuery 来获取所有输入的数组，检查它们的父项，然后只在该 div 之外的那些上执行样式。就像是：

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

（顺便说一句，我不是 jQuery 专家，所以上面可能会有一些错误，但原则上这样的东西应该可以）

于 2009-04-07T17:06:46.813 回答