Question

Bootstrap为<pre>标记定义了一组规则。但是，我不希望为pre选择器定义的任何规则。

Bootstrap定义了以下规则：

pre {
  display: block;
  padding: 9.5px;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.42857143;
  color: #333;
  word-break: break-all;
  word-wrap: break-word;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 4px;
}

但是，我想要一种干净的方法，将所有这些重置为“出厂默认值”并忽略引导样式，而无需手动将其写出规则。

这可能吗？

Answer 1

您可以为要重置的每个元素创建引导程序重置规则。因此，使用<pre>，您可以创建类似：

的内容

@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css');
 pre.reset {
  /* defaults */
  display: block;
  font-family: monospace;
  white-space: pre;
  margin: 1em 0px;
   
  /* bootstrap overrides */
  padding: initial;
  line-height: initial;
  color: initial;
  background-color: initial;
  border: initial;
  overflow: initial;
  word-break: initial;
  word-wrap: initial;
  border-radius: initial;
}

<pre>
    With bootstrap
</pre>

<pre class='reset'>
    Without bootstrap
</pre>

除了.reset课程之外，您可以使用scoping，但我强烈建议不要这样做，因为它令人困惑并且spotty browser support。

Answer 2

不幸的是，由于CSS的工作方式，这是不可能的。一旦Bootstrap定义了这些样式，你就会被它们困住，直到另一种更重要的样式覆盖它们。

您唯一的选择是：

在您要定位的浏览器的用户代理样式表中查找样式，然后在引导样式后手动将其写入
进入引导程序样式并注释掉定位<pre>

我建议在制作一份bootstrap副本并重命名后再使用选项2（这样就可以清楚地表明你已对库进行了调整）。

覆盖并重置CSS规则中的所有规范

2 个答案: