Question

我正在使用Sage Starter Theme，我正在添加一些CSS来设置 _global.scss 文件中全局链接的样式。 Bootstrap从文件 _reboot.scss 覆盖了一些CSS属性。

_global.scss

此样式为我的所有链接添加了悬停效果的基本下划线。

a {
    font-family: $font__lato !important;
    text-decoration: none;
    color: brown;
    position: relative;
    overflow: hidden;

    &:focus {
        outline: none;
    }

    &:after {
        content: "";
        position: absolute;
        z-index: -1;
        right: 0;
        width: 0;
        bottom: -5px;
        background: red;
        height: 2px;
        transition-property: width;
        transition-duration: 0.3s;
        transition-timing-function: ease-out;
    }

    &:hover:after,
    &:focus:after,
    &:active:after {
        left: 0;
        right: auto;
        width: 100%;
    }
}

_reboot.scss

如下图所示 _reboot.scss 优先于我自己的CSS。

在不使用text-decoration: none;或直接编辑 _reboot.scss 的情况下应用!important样式的正确方法是什么？

感谢您的帮助。

Answer 1

你需要使用特异性或自然级联来覆盖Bootstrap的样式，这是为什么许多人已经离开这些单片框架的一个原因，因为当必须覆盖Bootstrap中的所有内容时创建自定义样式需要很长时间

例如，您可以使用：

body > div > a {
    text-decoration: none;
}

这可能足以覆盖Bootstrap声明。

否则，如果您可以对样式进行重新排序，那么在此之后，根据声明的特殊性，它可能会或可能不足以在级联中占优势。

不要使用！重要的是，当您需要为链接添加更多样式并发现唯一的方法是添加更多！重要内容时，它会导致更多问题。

查看此内容，了解有关如何计算特异性的更多信息： https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

Answer 2

您需要确保您的样式表最后链接在 html 文件中，以便它级联 _reboot.scss。

例如你会这样做：

<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<link rel="stylesheet" href="styles.css">
</head>

而不是最后链接引导程序，以便您的级联引导程序

Answer 3

如果我可以对上面的答案发表评论，我会（还没有足够的声誉）。

感谢Alex（以上）的回答！这真的很有帮助。我的情况虽然非常相似，但不同，需要一点技巧。随着旧的答案随着事物的发展而过时，这通常是一个挑战。

为了建立在上述（将近 4 岁）正确答案的基础上，我在 Bootstrap 5 中也发现了这个问题。 Alex 在使用 Bootstrap 等整体框架方面提出了一个很好的观点。但是，由于开发工作中的资源很少，有时必须进行权衡。在出现更好的解决方案之前，我将 Bootstrap 用作单独的开发人员。

我试图覆盖链接的颜色，但无法让本地 css 样式覆盖 _reboot.scss.247。我当然不想诉诸于 !important！

在对此进行故障排除时，我进行了多次迭代，直到找到解决方案：

我在锚标签上尝试了 #id 样式
根据 Alex 的建议，我尝试为每个标签添加一个类样式，包括 Body。
但是，由于我试图将标题超链接更改为与常规标题相同的颜色（有意识的选择），这也改变了文本的颜色（即使我指定了 :hover、:visited 和 :链接）。
最后，将类添加到除正文之外的所有样式中是有效的。代码如下...

css 片段：

.heading-link:link, .heading-link:visited {
        color: #2C4D5C;  /* From the theme's colour palette */
    }
    .heading-link:hover {
        color: #E0E0E0;  /* From the theme's colour palette */
    }

html 片段（这是来自 Django 模板，因此其中一些代码可能不适合您的上下文）重点是在 body 下面的各种标签中使用标题链接类，从而扩展了上面 Alex 的回答:

<body>
<!-- other html code -->
    <section class="container-fluid px-0 padding-above-articles-header heading-link" id="article-header">
        <div class="text-center d-block">
            <img src="{% static 'articles/images/Collab-Map-Flat-wide-3272-252-blur-inner.jpg' %}" alt='Article-banner'>
        </div>
        <div class="container-xl article-header-container heading-link">
            <div class="heading-link">
                <div class="row heading-link">
                    <div class="col-lg-8 col-md-10 mx-auto centred-text heading-link">
                        <h1 class="centred-text display-4 heading-link"><a class="heading-link" href="{% url 'articles_home' %}">Articles</a></h1>
                        <div class="padding-above-element-double">
                            <div class="padding-above-element-double">
                                <h6>Breakthrough Inspiration...</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
<!-- other html code -->
<body>

结论：从 DRY 的角度来看我失败了，我的一部分感觉有点不舒服。但是，如果不重复将这个样式类包含到 html 层次结构中的每个标签中，我根本无法获得我想要的效果。我还没有查看 _reboot.scss 文件（鉴于我有待办事项列表的另一个权衡），所以我无法说明原因（我也没有经验认为自己甚至远程接近权威这个话题）。然而，最终的结果是这个解决方案是有效的，并且是一个很好的例子，说明 Stack Overflow 如何在处理最特殊的情况下非常有帮助。 :)

Answer 4

这是一个老问题，但在 Google 上很受欢迎，所以我想我会添加我的工作。

为您的对象添加 ID 或自定义类名称。

例如：

html,body{
    color:#222;
}

将不起作用，并且会被 _reboot.scss 覆盖。但是，如果您为 my-html 的 html 和正文 my-body 提供 id，那么这将起作用：

#my-html,#my-body{
    color:#222;
}

注意：我使用的是 React-BOOTSTRAP，所以这可能不适用于 NATIVE BOOTSTRAP

Answer 5

我正在阅读像你这样的问题，有人用bootstraps.css替换bootstrap.min.css

Bootstrap 4 - Reboot.scss覆盖Global.scss

5 个答案:

不要使用！重要的是，当您需要为链接添加更多样式并发现唯一的方法是添加更多！重要内容时，它会导致更多问题。