爲什麼內聯樣式被覆蓋

我想圍繞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已經在某處設置了一個重要的覆蓋，但我一直無法跟蹤這一點。

2014-03-24 Greg Gum

您可以在瀏覽器（Chrome中的開發人員工具，Firefox中的Firebug）中使用Web檢查器來跟蹤繼承的樣式。這樣，在第一步中，您可以消除任何干擾的「重要性」。 – dakab

變化你所申請聯樣式的順序。您可以在border風格中添加所有3個樣式，如border:5px dotted yellow;。那麼如果你仍然想要按照你的方式去做，只需要改變順序。首先添加border樣式，然後指定其他樣式。

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

2014-03-24 14:32:21 James

我現在明白了。「Border：5px」本身就是「Border：5px none currentColor」的簡寫形式，因爲它是樣式中的最後一個，所以它覆蓋了指定的邊框顏色和邊框樣式。我真正想要寫的是'邊界寬度'而不是'邊界'。 –

@GregHollywood乾杯.. :) – James

在Chrome中Inpsector：

在那裏，你可以看到應用的樣式，以及它們的來源，所以它會讓你知道爲什麼它被覆蓋。

enter image description here

2014-03-24 14:22:26 Matyas

回答