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)
ult*_*ian 32
Mozilla支持否定伪类:
:not(.classname) input {background: red;}
Run Code Online (Sandbox Code Playgroud)
另见:http://developer.mozilla.org/en/Mozilla_CSS_support_chart
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)
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)