不是CSS选择器

Bla*_*laM 69 css css-selectors

是否有某种"不"的CSS选择器?

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

.classname input {
  background: red;
}
Run Code Online (Sandbox Code Playgroud)

如何选择具有类classname的标签OUTSIDE的所有输入字段?

Pet*_*ton 51


使用当前的浏览器CSS支持,你不能.

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

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


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

$j(':not(.classname)>input').css({background:'red'});
Run Code Online (Sandbox Code Playgroud)

  • 您现在可以在当前浏览器中使用CSS执行此操作 - 请参阅下面的答案. (4认同)

Sam*_*ton 29

请注意,否定伪类位于选择器级别3建议书中,适用于最新版本的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>
Run Code Online (Sandbox Code Playgroud)

  • [现已支持](http://caniuse.com/#feat=css-sel3)所有主流浏览器的已发布版本.([自动测试](http://www.css3.info/selectors-test/)可用,如果你想仔细检查是否支持`:not()`.) (5认同)
  • 也许还值得补充一点,你可以将它们链接在一起:`div:not(#foo):not(#bar)` (2认同)

Har*_*lby 24

你不是通过将'全局'背景设置为红色,然后使用类名来改变其他背景吗?

input { background: red; }
.classname input { background: white; }
Run Code Online (Sandbox Code Playgroud)


Dan*_*ite 10

我会这样做的

input { /* styles outside of .classname */ }
.classname input { /* styles inside of .classname, overriding above */ }
Run Code Online (Sandbox Code Playgroud)