2014-03-24 273 views
0

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

+0

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

回答

2

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

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

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

+0

@GregHollywood乾杯.. :) – James

1

在Chrome中Inpsector:

  • 單擊要檢查
  • 右邊的元素,選擇已計算標籤

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

  • 您自己也可以隨時使用!important

enter image description here