如何在没有 !important 的情况下使用不同的类覆盖 css

Posted 2023-03-06

【中文标题】如何在没有 !important 的情况下使用不同的类覆盖 css

【英文标题】：How to overwrite css using different classes without !important

【发布时间】：2020-07-10 23:17:50

【问题描述】：

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

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，但我只想改变宽度，让它看起来像这样，而不使用 !important。

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

【问题讨论】：

您应该为它们添加另一个类或使用它们具有的另一个属性，以便它们具有更高的特异性，例如：.thirdButton.myClass, .thirdButton.myClass:active

类应该比一般选择器具有更高的特异性

@DaemonPainter 不“应该”；类选择器 比一般元素选择器具有更高的特异性。但是，attribute 选择器与类选择器在同一列中。

@Eduardo 阅读本文smashingmagazine.com/2007/07/…

【参考方案1】：

您可以为您的 CSS 添加更多特异性，以非常精确地定位该类型的元素并增强该选择器的功能。喜欢input[type="button"].thirdButton...，请看下面的演示：

input[type="button"],
input[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;


/* this is the selector line to change */
input[type="button"].thirdButton, input[type="button"].thirdButton:hover,     
input[type="button"].thirdButton:active 
  width: 50px;
  padding: 0;
  background-position-x: 50%;

<input type="button" name="generic" value="generic" /><br/>
<input type="button" name="third" value="third" class="thirdButton" />

【讨论】：

这是一个很好的答案。它可以更具体，例如：input[type="button"].thirdButton。最终，原始代码只需要在定义thirdButton 类的地方更改一行。

@camsnz 你是绝对正确的！随时修改我的答案。

【参考方案2】：

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

如果您有一个名称相同的 css 类，则页面下方的任何内容都将优先，ID 优先于类，!important 优先于所有内容。

如果您有 2 个 !importants，那么您页面下方的任何内容都将优先考虑