如何覆盖Bootstrap CSS样式？

我需要修改bootstrap.css以适应我的网站.我觉得创建一个单独的custom.css文件而不是bootstrap.css直接修改是更好的,一个原因是应该bootstrap.css获得更新,我将试图重新包括我的所有修改.我会为这些款式牺牲一些加载时间,但对于我压倒的几种款式来说,它可以忽略不计.

我是否重写,bootstrap.css以便删除锚/类的样式？例如,如果我想删除所有样式规则legend:

legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
  font-size: 21px;
  line-height: inherit;
  color: #333333;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}

我可以删除所有内容bootstrap.css,但如果我对覆盖CSS的最佳实践的理解是正确的,我该怎么做呢？

要清楚,我想删除所有这些样式的图例并使用父的CSS值.因此结合Pranav的答案,我会做以下几点吗？

legend {
  display: inherit !important;
  width: inherit !important;
  padding: inherit !important;
  margin-bottom: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  border: inherit !important;
  border-bottom: inherit !important;
}

(我希望有办法做以下事情:)

legend {
  clear: all;
}

smugglerFlyn.. 454

使用!important不是一个好选择,因为您很可能希望将来覆盖自己的样式.这给我们带来了CSS优先级.

基本上,每个选择器都有自己的数字"权重":

ID为100分

类和伪类的10分

标记选择器和伪元素为1分

在两种选择器样式中,浏览器总是会选择权重更大的选择器.样式表的顺序仅在优先级均匀时才有意义 - 这就是为什么覆盖Bootstrap并不容易.

您可以选择检查Bootstrap源,了解如何定义某些特定样式,并复制该选择器以使您的元素具有相同的优先级.但是我们在这个过程中放松了所有的Bootstrap甜味.

解决此问题的最简单方法是为页面上的一个根元素分配其他任意ID,如下所示:

这样,您可以使用您的ID为任何CSS选择器添加前缀,立即向该元素添加100个权重点,并覆盖Bootstrap定义:

/* Example selector defined in Bootstrap */
.jumbotron h1 { /* 10+1=11 priority scores */
  line-height: 1;
  color: inherit;
}

/* Your initial take at styling */
h1 { /* 1 priority score, not enough to override Bootstrap jumbotron definition */
  line-height: 1;
  color: inherit;
}

/* New way of prioritization */
#bootstrap-overrides h1 { /* 100+1=101 priority score, yay! */
  line-height: 1;
  color: inherit;
}

legend {
  display: inline;
  width: auto;
  padding: 0;
  margin: 0;
  font-size: medium;
  line-height: normal;
  color: #000000;
  border: 0;
  border-bottom: none;
}

h1 {
  line-height: 2;
  color: #f00;
}

.jumbotron h1,
.jumbotron .h1 {
  line-height: 1;
  color: inherit;
}