2

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

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

4

3 回答 3

2

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

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

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

于 2012-04-14T11:06:52.063 回答
1

从长远来看，如此长而复杂的选择器将很快变得无法维护。

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

.text-field {
    padding:8px;
    width:224px;
    border:1px solid #CCC;
    border-radius:5px;
}
于 2012-04-14T11:15:41.830 回答
0

I know the better answer has already been given, but just for the record, and to augment Tim's answer.

If you want to work with inputs that either have type="text" or don't have a type attribute at all, use this selector:

input:not([type]), input[type='text']
于 2012-04-14T11:29:55.833 回答