CSS Bootstrap 覆盖了我自己的 CSS答案

【问题标题】：CSS Bootstrap overrides my own CSSCSS Bootstrap 覆盖了我自己的 CSS
【发布时间】：2014-11-25 20:14:52
【问题描述】：

我正在尝试在我的网站 (ASPNET WebForms) 中创建一个拆分按钮。到目前为止，我喜欢的唯一拆分按钮实现是来自 Bootstrap 的实现。我没有使用他们框架的任何其他功能。但是，只要我插入：

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">

我自己的 CSS 是一团糟。我试图只隔离拆分按钮所需的类，但我无法成功地做到这一点。

这是我的带有所需类的拆分按钮的 html 代码

<div class="btn-group">
                          <button type="button" onclick="NewPost();return false;" class="btn btn-primary">Enviar</button>
                          <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span></button>
                          <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Enviar con notificaciones</a></li>
                          </ul>
                    </div>

有人知道隔离欲望类的方法吗？或者可能指向我另一个类似于这个和跨浏览器的拆分按钮实现？我用谷歌搜索了很多，但我发现唯一可用的是引导程序。

【问题讨论】：

标签： css html twitter-bootstrap

【解决方案1】：

我将 CSS 代码从外部 CSS 转移到内部 CSS。我尝试添加 !important，但没有帮助。

此外，我将自定义 CSS 链接移到引导程序下方，但这也无济于事。我知道我的方式很混乱，但它在我的情况下有效。

【讨论】：

【解决方案2】：

在你的 css 值之后使用 '!important'，例如：

pre {
     white-space: pre-wrap !important; 
}

h1 {
     color: red !important; 
}

【讨论】：

【解决方案3】：

很多人都在谈论在引导后添加自定义 CSS。通常，这似乎可行，但是，我遇到过一段时间，当使用 .modal 类时，它似乎会重新加载引导程序，而不是我的自定义 css。我（还）不知道为什么。在这种情况下，我通过在我的 css 中为我的元素创建一个类（并更改我的 html 以使用该类）来解决该问题，这使我的 css 更具体/更狭窄地定义并因此优先，或者通过使用！important，正如@kder 提到的那样。

所以，试试这个命令，如果由于某种原因不起作用，你必须找到一种方法来强制你的 css 更有针对性地或使用 !important。

示例（为简洁起见，代码被截断）。在这段代码中，我有引导 css，然后是我的 tripper.css。如果我使用 class="modal" 删除底部的代码，这将起作用，并且我的正文将根据 tripper.css 中的 css 进行格式化。如果我将模态代码留在底部，我必须将 !important 添加到正文选择器。

tripper.css

body {
  background-color:#00aaff;
}

html

<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<head>
<title>Gear Closet</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<link rel="stylesheet" href="/css/tripper.css">

</head>

<body>
  <div th:replace="fragments.html :: header"></div>
  <div th:replace="fragments.html :: navigation"></div>

  <div class="jumbotron text-center">
...
  </div>

  <div class="jumbotron text-center">
...
  </div>

  <!-- The Modal -->
  <div class="modal" id="importModal">
    <div class="modal-dialog">
      <div class="modal-content">

        <!-- Modal Header -->
        <div th:replace="fragments.html :: modalHeader(title=#{gear.import.title})"></div>
        
        <!-- Modal body -->
        <div class="modal-body">
          <div th:replace="fragments.html :: loadFile"></div>
        </div>

        <!-- Modal footer -->
        <div th:replace="fragments.html :: modalFooter"></div>
      </div>
    </div>
  </div>
  
  <div class="modal" id="addToBinModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <!-- Modal Header -->
        <div th:replace="fragments.html :: modalHeader(title=#{gear.addToBin.title})"></div>

        <!-- Modal Footer -->
        <div class="modal-footer">
          <label for="addGearBtn" class="btn btn-primary" th:text="#{navigate.add}">??navigate.add??</label>
          <label class="btn btn-danger" data-dismiss="modal" th:text="#{navigate.close}">??navigate.close??</label>
        </div>
      </div>
    </div>
  </div>

  <div class="modal" id="createBinModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <!-- Modal Header -->
        <div th:replace="fragments.html :: modalHeader(title=#{gear.createBin.title})"></div>
        



      </div>
    </div>
  </div>
</body>
</html>

【讨论】：

Bootstrap 在内置 nav-link 类上覆盖了我的颜色。添加!important 解决了这个问题。 a.nav-link-main { color: #ffffff !important; }

【解决方案4】：

正如他们之前所说，引导 css 导入必须在自定义 css 之前。像这样：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" >
<link rel="stylesheet" href="css/styles.css">

【讨论】：

【解决方案5】：

如此简单地使用 less 来去除不需要的 BS 组件。编译并缩小 bootstrap.min.css 文件，然后使用以下命令将其导入样式表：

@import url("bootstrap.min.css");在顶部。然后在您的 HTML 中简单地包含您的 CSS，这些将在之后阅读。

【讨论】：

【解决方案6】：

我不确定这是否能准确回答您的问题，但我在所有 BS 3 项目中所做的是：

在我的标题中：

<link rel="stylesheet" href="custom.css">

在custom.css

@import boostrap.less // or the fully compiled bootstrap css
// all your custom stuff, overrides, etc. down here

通过这种方式，我们首先加载 boostrap，但您想要执行的任何自定义操作都会最后加载，这意味着您覆盖的机会很高并且不会引起冲突。对于您的<head> 来说，这也是一条线而且更干净

【讨论】：

【解决方案7】：

使您的样式表成为最后导入的 css 文件。

【讨论】：

怎么回事？样式表级联。因此层叠样式表。最后添加您自己的自定义 css 将覆盖 TBS 中的属性。

【解决方案8】：

正如本页其他解决方案中提到的，有如下方法：

从引导网站创建自定义引导 css
将您不希望引导程序覆盖的自定义样式放在页面上的引导程序样式标记之后

根据我的经验，创建自定义引导 css 或对其进行编辑以删除不需要的类或样式规则并不实用。这是因为当更新版本的 bootstrap 出来时，您可能需要再次执行繁琐的过程。

相反，您可以继续使用自己的样式覆盖引导样式，放置在引导样式之后，然后再执行一个更有效地帮助您防止其他人覆盖您的样式的步骤。

您可以在 http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ 或 https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity 查看 CSS 样式的特殊性

一个例子可以是，写一个样式

.btn {
    background: red;
}

作为

#mypage .btn {
    background: red;
}

其中，mypage 可能是页面上最父元素的 ID（可能是 body 标签？）。这将使您的样式规则比 bootstrap CSS 中定义的更具体，它们将不再能够覆盖您的。

请注意，上面的代码 sn-p 只是一个说明，您绝对可以为此编写更好的样式。

【讨论】：

这个答案涵盖了 CSS 特异性的一个重要概念，其他答案没有。如需进一步阅读，请查看 Amelia Wattenberger 撰写的一篇精彩文章，来自 here。

【解决方案9】：

您可以访问 getbootstrap.com http://getbootstrap.com/customize/ 上的定制器

切换你需要的东西：

然后你下载它。

你打开它。查看基本样式和全局 box-sizing:border-box。

要么更改所有 CSS 以使用 box-sizing:border-box（谷歌搜索），要么将其放在表单、按钮所需的所有引导 css 上的 :before、:after 和元素上和下拉菜单（它们一起工作）。

【讨论】：

【解决方案10】：

一个很好的经验法则。始终将样式表与您希望最权威的规则放在最后。你可能有

<link rel="stylesheet" href="/css/mystyles.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">

所以任何在 bootstrap css 中声明的样式都会覆盖你的样式。而是尝试

 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/mystyles.css">

这样，样式表中的规则具有更高的优先级。

除此之外，您最好不要使用 bootstrap 的缩小版本，这样您就可以更轻松地删除任何冲突的类。

【讨论】：

如果您自己的 css 中没有定义按钮样式（如果您想使用浏览器的默认按钮样式），您的解决方案将不起作用。
@AlexG 对，它仅在您想要覆盖样式时才有效，例如 OP 遇到的问题。
这个解决方案对我不起作用。我在 style.css 之前有两行 bootstrap.css，它仍然会覆盖。