代码之家 › 专栏 › 技术社区 › Marcelo Cantos

不是CSS选择器

css-selectors css

Marcelo Cantos · 技术社区 · 15 年前

有没有某种“不”的CSS选择器?

例如,当我在我的CSS中写下以下行时,一个带有类的标记中的所有输入字段 类的名称 将具有红色背景。

.classname input {background: red;}

如何选择带有类的标记之外的所有输入字段 类的名称 ?

8 回复 | 直到 6 年前

Community raghavsood33 7 年前

~~有了当前浏览器的CSS支持,您就不能了。~~

更新的浏览器现在支持它-请参见 Sam's answer 更多信息。

(有关CSS中的备选方案,请参阅其他答案。)

如果可以在javascript/jquery中执行,则可以执行以下操作:

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

Sotiris 13 年前

Mozilla支持 negation pseudo-class :

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

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

Sam Dutton 13 年前

注意,否定伪类在 Selectors Level 3 Recommendation 并且可以在最新版本的火狐、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>

Harper Shelby damiankolasa 15 年前

难道你不把“全局”背景设置为红色,然后用类名来改变其他类名吗?

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

Daniel A. White 15 年前

我会这样做

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

Zack The Human 15 年前

无法用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,您就走运了。

Dan Roberts 15 年前

我认为你能得到的最接近的是只影响直接后代的声明

例如,此代码将只影响带有“mainContent”类的div下的直接输入字段。

div.maincontent > input {
  // do something
}

wheresrhys 15 年前

输入有点烦人,因为与大多数其他HTML元素不同,没有必要用一种方法将所有CSS属性重置回其默认值。

如果样式是非关键的(即很好拥有但不影响功能),我将使用jquery获取所有输入的数组,检查它们的父级,然后只对该分区之外的那些进行样式设置。例如:

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

(顺便说一句,我不是jquery专家,所以上面可能有一些错误,但原则上应该可以这样做)