父级不是 'classname' 的 CSS 选择输入

Question

我的样式表中有这条规则:

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) 但由于显而易见的原因，这不起作用。我似乎无法在任何地方找到这个问题的答案

Answer 1

正确的方法可能是采用“白名单”方法而不是“黑名单”方法(告诉浏览器不选择什么)。

一方面，它避免了您遇到的问题。此外，: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;
}

我意识到这可能需要更多标记，但从长远来看可能更容易维护。