【问题标题】：Bootstrap CSS is not getting overridden?Bootstrap CSS 没有被覆盖？
【发布时间】：2021-01-03 07:38:42
【问题描述】：

我在我的网站上使用 Bootstrap CSS 并正在加载 <head> 元素。就在我加载 boostrap 的下方，我有一个 <style> 元素，我试图从引导程序中覆盖一些 CSS，但是当我查看 Chrome Dev Inspector 时它并没有覆盖它。我认为 element 中的元素应该级联前一个？

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <title>Women's Transit</title>
        <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" type="text/javascript" />-->
        <link rel="stylesheet" href="/CS483-Final/content/bootstrap/css/bootstrap-responsive.css" type="text/css" />
        <link rel="stylesheet" href="/CS483-Final/content/bootstrap/css/bootstrap.css" type="text/css" />

        <style type="text/css">
            /* Global elements */
            input {
               height:30px;
               padding:8px;
            }
         </style>
</head>

【问题讨论】：

你能显示你的 HTML 标记吗？

标签： css html

【解决方案1】：

你可能想要!important。

input {
    height: 30px !important;
    padding: 8px !important;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

特异性是浏览器决定哪些属性值与元素最相关并被应用的方法。特异性仅基于由不同种类的选择器组成的匹配规则。

重要：

当在样式声明中使用 !important 规则时，该声明将覆盖 CSS 中的任何其他声明，无论它在声明列表中的什么位置。虽然， !important 与特异性无关。使用 !important 是不好的做法，因为它会破坏样式表中的自然级联，从而使调试变得困难。

所以!important 是覆盖样式的最简单方法，因为它比其他样式更“具体”。请注意，覆盖样式是非常糟糕的做法，尤其是 !important。

实际解决方案：不要覆盖样式。

【讨论】：

Using !important is bad practice because it makes debugging hard since you break the natural cascading in your stylesheets.
我知道。但是 OP 的问题是关于覆盖样式的，所以即使这是一个不好的做法，这就是问题所在。
它可以被覆盖而不使用!important。我很确定。
是的，是的。但重要的是最简单的方法，有时使用其他东西可能并不具体。您可以确定 important 会覆盖（并且您可以确定您不确定其他不太具体的方式），并且 important 是专门为这项工作而制定的。

【解决方案2】：

您创建的内部或嵌入式样式将具有比 Bootstrap 更高的“重要性顺序”，并且仅当在 Bootstrap 的工作表中使用具有相同权重和选择性的相同选择器时，它们的样式才会级联。这不太可能，因为他们使用类来修改大多数样式。 “输入”元素的权重为 1，因此如果他们使用具有这些属性的类，它们很容易与您的元素样式层叠（普通类的权重通常为 10）。

Bootstrap 确实在其重新启动元素样式表中使用了“输入”样式，因此您的表单可能会层叠在该样式表上。但是我没有看到它们在那里改变高度或填充，因此您的样式将适用，直到他们的自定义类进一步更改其属性样式。此外，它们的输入样式会更改您不会更改的内容，例如“margin”和“line-height”，这可能会进一步影响您的布局。

我的建议是不要使用“input”或“！important”，而是创建一个自定义类并将该类添加到您的元素中。使其比具有全套属性的 Bootstrap 更具选择性，因此您可以层叠 Bootstrap 的输入和类样式，但继承一些您喜欢的东西。这让您现在可以完全控制您喜欢和不喜欢 Bootstrap 的内容：

body form .myinput{
    width:100px
    height: 30px;
    padding: 8px;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

<input class="myinput ..." />

大多数使用 CSS 的年轻 Web 开发人员的缺点是他们没有为他们的样式添加足够的样式属性，并且依赖于继承或未知的更改来级联到他们的元素中。添加一整套属性可以让您完全控制该元素的外观以及它所继承的内容。

谜团消失了:)

【讨论】：