页面上有2个CSS文件，但优先考虑第一个[重复]答案

【问题标题】：Have 2 CSS files on page but give the first one priority [duplicate]页面上有2个CSS文件，但优先考虑第一个[重复]
【发布时间】：2020-04-14 16:47:13
【问题描述】：

我正在使用 WordPress 主题，我需要为某个页面使用 Bootstrap。

页眉包括这两种样式：

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

如果样式是在 default.css 中定义的，有没有办法避免使用引导程序？

还是让第一行中的每一行 !important 成为唯一可用的选项？

【问题讨论】：

只需交换两个文件的包含顺序。鉴于两个文件都指定了具有相同特异性的选择器，后者定义的获胜。 如果样式是在 default.css 中定义的，有没有办法避免使用引导程序？ - 不，没有技术方法。 !important 的使用也不是选项。
这有点复杂，这可以帮助：developer.mozilla.org/en-US/docs/Web/CSS/Specificity
看看这个。 stackoverflow.com/questions/3671551/…
这能回答你的问题吗？ Understanding CSS selector priority / specificity
使用!important 是增加特异性的一种（hacky）方法，但还有其他方法（请参阅链接的重复问题）。如果我没记错引导程序，您应该能够通过将 2-3 个 CSS 类添加到您的 HTML 结构然后使用它们来覆盖样式。

标签： html css

【解决方案1】：

您可以使用!important。如果在 css 属性之后添加重要关键字，它将覆盖其他关键字。

例如：

.id{ 
  color: red;
}

.other-id{ 
  color: blue !important;
}

<p class="id other-id">test</p>

在此示例中，选择的颜色将为蓝色，因为此属性为 tagé !important。

【讨论】：

【解决方案2】：

将 !important 添加到 bootstrap.css 中已修改的现有类或 id，

如果您不想修改类或 id，

只需更改类名（在 div 中）并使用您的 default.css“设计”它

【讨论】：