为什么内联样式被覆盖

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已经在某处设置了一个重要的覆盖，但我一直无法跟踪这一点。

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中Inpsector：

• 单击要检查
• 右边的元素，选择已计算标签

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

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