我的样式表中有这条规则:
input:not([type='button']):not([type='submit']):not([type='checkbox']):not([type='radio']),
select {
padding:8px;
width:224px;
border:1px solid #CCC;
border-radius:5px;
}
这针对我页面上的所有文本字段,但我需要防止它影响具有特定类的元素内的输入。我正在使用 ckeditor,并且不需要影响它创建的对话框中的字段 - 这意味着我不能随后覆盖规则。
我尝试添加 :not(.cke_editor_pageContent_dialog input)
但由于明显的原因这不起作用。我似乎无法在任何地方找到这个问题的答案
最佳答案
正确的方法可能是采用“白名单”方法而不是“黑名单”方法(告诉浏览器不选择什么)。
一方面,它避免了您遇到的问题。另外, :not()
选择器在 IE8 或更低版本中不起作用(不确定这是否重要)。最后(只是猜测)我必须相信复杂的 :not
语句的评估成本更高。
我建议在相关元素上放置显式类名,或者更好的是,将所有非编辑器元素包装在一个元素内并将其用作样式容器。
<div class="myStyles">
<!-- elements that should be styled -->
<input type="text" />
</div>
.myStyles input[type="text"]{
padding:8px;
width:224px;
border:1px solid #CCC;
border-radius:5px;
}
我意识到这可能需要更多标记,但从长远来看可能会更容易维护。
关于CSS 选择输入,其中父级不是 'classname',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10153072/