jquery - CSS 伪类覆盖类

Question

我有以下 CSS：

input:not([type=submit]):not([type=file]) {
    width: 500px;
}

.filterTextbox {
    width: 150px;
}

我希望能够将 filterTextbox 类分配给某些输入元素并使文本框为 150px 宽。你可以猜到，现在发生的事情是第一个样式覆盖了 .filterTextbox 类，我最终得到了所有输入文本框 500px 宽。

那么，关于如何轻松解决这个问题的任何想法？

score 4 · Accepted Answer

这是另一个不使用 !important 的选项：

input:not([type=submit]):not([type=file]):not(.filterTextbox) {
    width: 500px;
}

input.filterTextbox {
    width: 150px;
}

由于上面的规则是“排除”一 - 添加一个排除似乎比使用更合理!important。

我可能会使用类来匹配我想要匹配的输入，或者完全使用更流畅的布局。

score 2 · Accepted Answer

一种选择是使用!important：

.filterTextbox {
    width: 150px !important;
}

第一条规则更具体，因此获得更高的优先级。关键字让浏览器!important知道哪个规则是所需的，无论它的优先级如何。

然而，更好的做法不会!important像评论中建议的那样使用。你可以这样做：（工作 jsFiddle）

input[type="text"].filterTextbox {
    width: 150px;
}

这将比第一条规则更具体。

score 1 · Accepted Answer

改变

.filterTextbox {
    width: 150px;
}

至

.filterTextbox {
     width: 150px !important;
}

这应该覆盖应用于它的任何其他内容。

3 回答 3