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;
}

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

Answer 2

从长远来看，这么长而复杂的选择器很快就会变得无法维护。

在想要以相同方式设置样式的元素上添加公共类会更容易和更清晰。

.text-field {
    padding:8px;
    width:224px;
    border:1px solid #CCC;
    border-radius:5px;
}

Answer 3

我知道已经给出了更好的答案，但仅仅是为了记录，并且增加了蒂姆的答案。

如果您想使用具有type="text"或根本没有type属性的输入，请使用此选择器：

input:not([type]), input[type='text']

CSS选择输入，其中父级不是'classname'

3 个答案: