如何使用不同的类来覆盖css，而不需要！重要的

在我的代码中，我的所有按钮都有一个通用表单：

input[type="button"],put[type="button"]:active,input[type="button"]:hover {
    width: 172px;
    height: 37px;
    line-height: 2 !important;
    margin: 11px 0px 0px 0px;
    padding: 5px 150px 9px 5px;
    line-height: 19px;
    font-size: 12px;
}

但是系统中的一些按钮的宽度是普通按钮的一半或三分之一。因此，他们仍然是类型按钮，并收到上面的css，但我只想改变宽度，让它看起来像这样没有使用！重要的

.thirdButton, .thirdButton:active {
    width: 28px;
    padding: 0;
    background-position-x: 50%;
}

---

您需要编辑当前类并将其更改为您想要的方式，如果希望保持当前类的原样，请创建一个新类

如果您有一个名为相同的css类，那么页面下方的任何内容都将优先，ID优先于类和！重要优先于一切

---

如果你有两个！同样重要的是，页面下方的任何内容都将优先考虑

您可以为CSS添加更具体的内容，以非常精确地定位该类型的元素，并增加选择器的功能。类似于

input[type=“button”]。第三个按钮{…}

参见下面的演示：

input[type=“button”]，
输入[type=“button”]：激活，
输入[type=“button”]：悬停{
宽度：172px；
高度：37像素；
线高：2！重要；
保证金：11px 0px 0px 0px；
填充：5px150px 9px 5px；
线高：19px；
字体大小：12px；
}
/*这是要更改的选择器行*/
输入[type=“button”]。第三个按钮，输入[type=“button”]。第三个按钮：悬停，
输入[type=“button”]。第三个按钮：激活{
宽度：50px；
填充：0；
背景位置x:50%；
}

您应该向它们添加另一个类或使用它们拥有的另一个属性，以便它们具有更高的特异性，例如：

.thirdButton.myClass、.thirdButton.myClass:active

类的特异性应高于generalselectors@DaemonPainter不是"应该",；类选择器比一般元素选择器具有更高的特异性。但是，属性选择器与类选择器位于同一列中。@Eduardo阅读本文这是一个很好的答案。它甚至可以更具体，比如：

input[type=“button”].thirdButton

。最终，原始代码只需要在定义了

thirdButton

类的地方更改一行即可。@camsnz您完全正确！请随意编辑我的答案。