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

Question

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

<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>

Answer 1

您可能想要!important。

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

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

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

重要的：

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

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

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

Answer 2

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

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

我的建议是不要使用“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 开发人员的失败之处在于，他们没有为他们的样式添加足够的样式属性，而是依赖于继承的或未知的更改级联到他们的元素中。通过添加一整套属性，您可以完全控制该元素的外观及其继承的内容。

神秘消失了:)

Bootstrap CSS没有被覆盖？

2 个答案:

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