分別設置邊框的子屬性

我想分別設置border-style,border-width和border-color。特別是，我想爲整個文檔設置默認的border-style爲solid，併爲各個元素設置border-width和border-color。我有一個html：分別設置邊框的子屬性

<body> 
    <div id="foo"> 
    bar 
    </div> 
</body>

和css：

body{ 
    border-style: solid; 
    border-width: 0px; 
} 
#foo{ 
    background: red; 
    border-width: 1px; 
    border-color: green; 
}

的border-width: 0px;內body用來設置默認元素有沒有邊界，而默認border-style設置固體（如果我刪除它，那麼默認的border-style將按照預期設置，但是主體將具有邊界，這不是預期的）。 #foo中的所有設置旨在覆蓋默認設置。當我顯示這個時，邊框不會在div#foo附近出現。爲什麼不出現邊界，以什麼方式來做到這一點？

來源

2014-01-21 sawa

邊框造型不會從body元素繼承。您正在尋找universal selector, *，這將基本上將樣式應用於所有元素，因此可用作僞缺省樣式。

* { 
    border-style: solid; 
    border-width: 0px; 
}

EXAMPLE HERE

來源

2014-01-21 17:33:51

我相信你的第一件申請了堅實的邊境只有到body元素，該財產不被它的孩子繼承。

嘗試使用：

* { 
    border-style: solid; 
    border-width: 0px; 
}

~~您可以刪除border-width，順便說一句，作爲默認值已經是0像素。~~

（編輯，以反映意見）

來源

2014-01-21 17:35:08 mattsoave

你的回答是第一個給了爲什麼我的代碼不工作的原因。 Upvote，但是，你的'border-width'部分是錯誤的。 – sawa

將border-style設置爲solid會自動將邊框寬度從0改爲：http：// jsfiddle。net/Ckx9v/ – Anonymous

你是對的。我在本頁面上使用Inspect Element進行了測試，它必須有一些東西來覆蓋瀏覽器的默認邊框寬度樣式。對於那個很抱歉。 – mattsoave

的問題是要設置邊框機身四周的風格。要設置它對於身體的所有元素，你可以使用：

body *{ 
    border-style: solid; 
    border-width: 0px; 
} 
#foo{ 
    background: red; 
    border-width: 1px; 
    border-color: green; 
}

來源

2014-01-21 17:35:50 Anonymous

你可以寫

border-style: inherit;

使用父母的邊框樣式。或者像@匿名說

body * { 
    border-style: solid; 
    border-width: 0px; 
}

爲所有的身體的孩子。

編輯：「繼承」是指其直接父母的價值。例如：

<body> 
    <div id="foo"> 
    <div id="boo"> 
    </div> 
    </div> 
</body>

CSS：

body { 
    border-width: 3px; 
    border-style: solid; 
    padding: 10px; 
} 

#foo { 
    border-width: 3px; 
    background: green; 
    border-color: green; 
    padding: 10px; 
    // border-style is not set -> default value "none" 
} 

#boo { 
    border-width: 3px; 
    background: yellow; 
    border-color: pink; 
    border-style: inherit; 
    padding: 10px; 
    // border-style is "none" because foo's border-style is none 
}

來源

2014-01-21 17:44:14

什麼是'border-style：inherit;'的選擇器？如果它是'body *'或'*'，那麼它似乎比設置'border-style：solid;'更爲間接。 – sawa

這是它的直接父母。這是一個小提琴：http://jsfiddle.net/56daU/4/ –

分別設置邊框的子屬性

回答

相關問題