html - 不带 !important 更改默认值

Question

试图弄清楚结构，但我怎样才能改变事物的默认值？比如按钮颜色？现在我正在创建一个 styles.css 并做：

.btn-primary { background-color: green !important }

我想避免使用 !important 来处理类似的事情。任何帮助将不胜感激。

Answer 1

我发现非常有用的是在本地运行页面并使用 Google Chrome DevTools。如果您查看样式选项卡，它将允许您检查您的元素，以便查看您的样式是否以及从何处继承。通常我只需要确保我使用更具体的选择器。

DevTools 概述：https ://developer.chrome.com/devtools

Answer 2

您似乎遇到了特异性问题。这里有一个关于MDN特异性的很好的细分。检查是否btn-primary被包装在其他类中并覆盖您的自定义 CSS。还可以尝试将 ID 添加到按钮的父容器，然后定位您的自定义 CSS，例如：

#button-parent-container {
   .btn-primary {
     // your code here.
  }
}

如果您不使用 SASS，那么您的声明将是：

 #button-parent-container .btn-primary {
   // your code here
 }

Answer 3

您根本不必使用重要的，只需确保在引导 css 之后加载自定义 css，如下所示：

<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/custom.css" />

那么你不应该使用重要的来覆盖css这里是一个小提琴来向你展示这个小提琴演示