不是CSS选择器

70

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

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

.classname input {
  background: red;
}

如何选择类名为class的标签之外的所有输入字段？

css css-selectors

— 布莱姆
source

52

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

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

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

如果可以在JavaScript / jQuery中进行，则可以执行以下操作：

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

— 彼得·布顿
source

1

选择器不是“ *：not（.classname）输入”吗？

— Zack The Human

啊，看错了问题。是的，它应该-尽管*是可选的。

— 彼得·布顿

Ah，也需要使用直接后代（a> b）而不是任何后代（ab），否则所有输入都将匹配，因为可能会有一个更高的容器而不包含类（如body）。

— 彼得·布顿

4

您现在可以在当前的浏览器中使用CSS进行操作-请参见下面的答案。

— 山姆·达顿

不赞成投票；如果您可以在jQuery中执行此操作，则应该在不丢弃必须处理的70KB额外带宽的情况下使用纯JavaScript进行操作。

— 约翰（John）

32

Mozilla支持否定伪类：

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

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

— 超crecreparian
source

1

ie9 +也支持这一点。

— chovy

还有chrome，safari和Opera，向下滚动并阅读更多答案（如果您不相信我的话）； P

— 公鸡

哦，我相信你。我只是再也没有回过头来扩大我在6年零1周前提供的答案了。：D

— 超快的人

谢谢你只是为了增加您的答案。 .no_in_cart）a {background：red;}无效，因此我尝试了此#headernav li a：not（.no_in_cart）{background：red;}正常。

— 莎拉

29

请注意，否定伪类在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>

— 山姆·达顿
source

5

现在所有主要浏览器的发行版本均支持。（如果需要再次检查，则可以使用自动测试:not()。）

— Dan Cecile 2012年

2

也许还值得一提的是，您可以将它们链接在一起： div:not(#foo):not(#bar)

— Daz 2013年

FWIW我在simpl.info/cssnegativeselector中放了一个简单的否定选择器演示。

— 山姆·达顿

24

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

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

— 哈珀·谢尔比
source

这正是我试图找到解决方法的原因，因为它不仅改变了背景……

— BlaM

覆盖.classname input规则中的每个选项。

— Daniel A. White

您尝试使用“ .classname输入{background-color：white！Important;}” ??

— AgelessEssence，2011年

10

我会这样做

input { /* styles outside of .classname */ }
.classname input { /* styles inside of .classname, overriding above */ }

— 丹尼尔·怀特
source

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会很不幸。

— 扎克人类
source

0

我认为您可以得到的最接近的结果是仅通过声明影响直接后代

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

div.maincontent > input {
  // do something
}

— 丹·罗伯茨
source

0

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

如果样式不是关键的（即不错但不影响功能），我将使用jQuery获取所有输入的数组，检查其父级，然后仅对该div之外的样式进行样式设置。就像是：

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

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

— 哪里
source