html - 为什么当我在 'container container-fluid' 旁边添加自己的类时，我的宽度比我在 DIV 上使用 ID 时的宽度大？

Question

如果我将 mainCont 作为一个类，它看起来像这个“container container-fluid mainCont”，则 div 占用的宽度比在下面的代码中将 mainCont 设置为 ID 时更大。为什么是这样？我的猜测与某些 Bootstrap 样式仍然优先有关？

body {
  width: 100%;
  font-size: 16px;
  /*or 1 em*/
}

#mainCont {
  width: 50%;
  margin: 0 auto;
  background-color: rgb(177, 175, 175);
}

<div class='container container-fluid' id='mainCont'>
  <div class="row">
    <h1 id="twitchHead">TWITCH STREAMERS</h2>
  </div>
</div>

Answer 1

它与特异性有关 - Id 比类具有更大的特异性 - 所以当您将 id 应用于元素时 - 该 id 的样式规则胜过基于类的样式规则。

您应该首先加载 Bootstrap 样式表，然后在它之后简单地编写您的样式表——带或不带 id。请注意，尽管在 Bootstrap CSS 中合理使用了 !important，因此最好使用 id 以获得更大的特异性。

顺便说一句 - 在 Bootstrap 世界中，.container 将 div 限制为 1200 px 并将其居中(使用 margin:0 auto)，而 .container fluid 允许 div 占据浏览器的整个宽度 - 你应该使用其中一个但不两者。

关于特异性及其计算方式的有趣读物 https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity