我的情况

Question

我的情况

我最近在Bootstrap 4.1中编写了一个简单的网站，该网站应该使用特定的紫色阴影来满足其所有的着色需求。

我的想法是创建一个CSS类<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="tab"> <button class="tablinks" onclick="openCity(event, 'People')" id="defaultOpen">People</button> </div> <div id="People" class="tabcontent"> <div class="line1"> <h3>Name 1 :</h3> <h3>Age 1 :</h3> <h3>Name 2 :</h3> <h3>Age 2 :</h3> <h3>Name 3 :</h3> <h3>Age 3 :</h3> <h3>Name 4 :</h3> <h3>Age 4 :</h3> </div> </div> </body> </html>，该类将覆盖所有与颜色相关的必要属性，例如.btn-purple，color，background-color等。

这对于基本的配色方案效果很好，但是一旦涉及到不同的按钮状态（例如border-color，:hover和:focus），我看到内置的Bootstraps选择器比我简单的类选择器"more specific"要多，因此推翻了它们。

我的“修复”

我通过将:active应用于所有自定义选择器来临时解决此问题。但是，这似乎被认为是错误的设计，我不确定如何解决此问题。我链接到的页面具体指出以下内容：

总是在甚至考虑!important之前寻找使用特异性的方法。

仅在特定于页面的CSS上使用!important，该CSS会覆盖外部CSS（来自外部库，如Bootstrap或normalize.css）。

这对我来说似乎有点矛盾。我不确定在我的用例中使用!important是否合理，还是仍然被认为是黑客。

此外，我想补充一下，我正在使用他们的CDN提供的Bootstrap。因此，我想避免自己编写自己的样式。

我的问题

在这种情况下处理!important的首选方式是什么？

Answer 1

您可以尝试覆盖变量默认值：

Theming Bootstrap

Bootstrap 4中的每个Sass变量都包含！default标志，使您可以覆盖自己的Sass中变量的默认值   无需修改Bootstrap的源代码。将变量复制并粘贴为   需要时，修改其值，然后删除！default标志。如果一个   变量已被分配，那么它不会被重新分配   Bootstrap中的默认值。

同一Sass文件中的变量替代可以出现在之前或之后   默认变量。但是，在覆盖Sass文件时，   您的替代项必须在导入Bootstrap的Sass文件之前出现。

下面是一个示例，该示例更改了背景色和    通过npm导入和编译Bootstrap时：

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "node_modules/bootstrap/scss/bootstrap";

对Bootstrap中的任何变量（包括全局选项。

Answer 2

尝试创建一个最小的示例来展示我的问题后，我意识到我所有问题的来源都在哪里。以下示例是我创建按钮的方式：

<a class="btn btn-outline-primary btn-purple" href="#">

由于我一直将“主要”样式应用于按钮，因此自定义类无法覆盖样式。解决方案就是简单地删除btn-outline-primary并自己实现btn-outline-purple，就像这样：

.btn-outline-purple {
    color: #490088;
    background-color: transparent;
    background-image: none;
    border-color: #490088;
}

.btn-outline-purple:not(:disabled):not(.disabled):active,
.btn-outline-purple:hover {
    color: #ffffff;
    background-color: #490088;
    border-color: #490088;
}

.btn-outline-purple:focus {
    box-shadow: 0 0 0 0.2rem rgba(73, 0, 136, 0.5);
}

像这样，.btn-outline-*的行为将被模拟而没有任何!important样式。然后，将创建一个新按钮，如下所示：

<a class="btn btn-outline-purple" href="#">

实施自定义引导主题时，如何看待！important？

我的情况

我的“修复”

我的问题

2 个答案: