为什么内联样式被覆盖？

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

样式本身中添加所有 3 种样式，如

border:5px dotted yellow;

。好吧，如果您仍然想按照原来的方式进行，只需更改顺序即可。首先添加

border

样式，然后像这样指定其他样式。

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

Answer 2

在 Chrome Inspector 中：

• 单击您要检查的元素
• 在右侧，选择已计算选项卡

您可以在其中看到应用的样式及其来源，因此它可以让您了解为什么它被覆盖。

• 您自己也可以随时使用

  !important

  。