何时可以覆盖 Bootstrap？

Question

当我可以或不能使用自定义 .css 覆盖 Bootstrap classe/id 时，我发现非常随机

例如，要更改默认的 navbar-dark、背景和字体样式覆盖是可以接受的。 但是字体颜色和大小不能改变，除非我强制在元素内部应用“样式”或作为链接到外部 css 文件的“id”进行更改。

什么不起作用：

<nav class="navbar navbar-dark"style="background: red; color: 
yellow; font-family: cursive font-size: 50px;">
  <a href="" class="navbar-brand" style="color: yellow; font-size: 
 50px;">PATTERN</a>
</nav

在元素作品上应用样式，如：

<nav class="navbar navbar-dark"style="background: red; font-family: 
cursive;">
  <a href="" class="navbar-brand" style="color: yellow; font-size: 
 50px;">PATTERN</a>
</nav

当我有一个很大的导航栏并且我想将一个类应用于所有元素时，只能在每个元素内部使用 id 会成为一个问题。

我可以做些什么来自定义或如何了解这些限制？

谢谢你:)

Answer 1

您面临的问题与 CSS Specifity 直接相关。当有两个或多个冲突的 CSS 规则指向同一个元素时，CSS 特殊性适用。 CSS 规则的特殊性决定了哪一个冲突规则将应用于您的 html 元素。一般来说，更具体的 CSS 规则会优先于不太具体的规则。这是，从更具体到不太具体：

1. 内联样式：在“stype”属性中定义的样式，在 html 标记内。
2. ID：通过 id 而不是类引用元素的 CSS 规则（例如 #navbar）。
3. 类、属性和伪类：最常见的 CSS 规则。例如：

.blueBackgroundClass {
   background: blue;
}

4. 元素和伪元素：通常只用于制作网站通用样式，例如：

p {
   font-family: "Times New Roman", Times, serif;
}

a {
   color: blue;
}

有关它的更多信息，我强烈建议您查看CSS Specifity 文档。

Answer 2

这取决于颜色样式是在 Bootstrap 中设置在父元素上然后下降还是直接设置在子元素上......并且它设置在子元素上......所以你需要直接设置它孩子。

但是使用 CSS，或者 LESS，SASS 等。不要使用内联类，为所有你想要定位的孩子全局设置它。

像这样：

.navbar-dark .navbar-brand {
    color: yellow;
}