为什么要重写内联样式

Question

我试图在div周围放置一个边框。

<div style="border-color: yellow; border-style: dotted; border: 5px;">
<p>
    This is a test.
</p>
</div>

然而，当我运行它时，这就是浏览器显示的实际样式：

<div style="border: 5px currentColor;">...</div>

结果是根本没有显示边框。

这对我来说没有意义为什么要覆盖边框样式。我只能想象Bootstrap在某处设置了一个！important覆盖，但是我无法追踪它。

Answer 1

更改应用内联样式的顺序。您可以像border一样在border:5px dotted yellow;样式中添加所有3种样式。好吧，如果您仍想按照自己的方式行事，只需更改订单即可。首先添加border样式，然后指定其他样式。

<div style="border: 5px; border-color: yellow; border-style: dotted;">
<p>
    This is a test.
</p>
</div>

Answer 2

Chrome Inpsector：

• 点击您要检查的元素
• 在右侧，选择已计算标签

在那里你可以看到应用的样式及其来源，因此它可以让你知道为什么它被覆盖。

• 您也可以自己使用!important。