jquery - CSS伪类覆盖类

我有以下CSS：

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

.filterTextbox {
    width: 150px;
}

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

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

最佳答案

一种选择是使用!important：

.filterTextbox {
    width: 150px !important;
}

第一条规则更加具体，因此具有更高的优先级。 !important关键字使浏览器知道哪个规则是所需的规则，而不管它的优先级如何。

但是，更好的做法是不使用!important注释中建议的一些方式。您可以执行以下操作：（working jsFiddle）

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

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