CSS伪类重写类

Question

我有以下CSS：

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

.filterTextbox {
    width: 150px;
}

我希望能够将filterTextbox类分配给某些输入元素，并且文本框的宽度为150px。正如您所猜测的那样，现在正在发生的事情是，第一个样式会覆盖.filterTextbox类，并且我最终会将所有输入文本框放在500px宽的范围内。

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

Answer 1

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

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

input.filterTextbox {
    width: 150px;
}

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

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

Answer 2

一种选择是使用!important：

.filterTextbox {
    width: 150px !important;
}

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

然而，更好的做法是不会使用!important作为评论中的一些建议。你可以这样做：（working jsFiddle）

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

哪个比第一条规则更具体。

Answer 3

变化

.filterTextbox {
    width: 150px;
}

到

.filterTextbox {
     width: 150px !important;
}

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