爲什麼這些CSS規則經常重複？

Question

我在Web檢查器中查看單個span元素（用於頂層菜單）[here] [1]。

element.style { 
} 
html, body, br, hr, div, span, a, object, iframe, ul, ol, dl, li, dt, dd, h1, h2, h3, h4, h5, h6, p, blockquote, q, address, small, big, cite, dfn, ins, del, i, em, b, strong, sup, sub, strike, pre, code, samp, kbd, var, tt, form, fieldset, legend, label, input, textarea, option, .nobox { 
    background: transparent; 
    border: 0; 
    font-size: 100%; 
    margin: 0; 
    outline: 0; 
    padding: 0; 
    vertical-align: baseline; 
} 
Inherited from 
a { 
    color: #b00909; 
    text-decoration: none; 
} 
html, body, p, a, h1, h2, h3, h4, h5, h6 { 
    -webkit-font-smoothing: antialiased; 
    text-rendering: optimizeLegibility; 
} 
html, body, br, hr, div, span, a, object, iframe, ul, ol, dl, li, dt, dd, h1, h2, h3, h4, h5, h6, p, blockquote, q, address, small, big, cite, dfn, ins, del, i, em, b, strong, sup, sub, strike, pre, code, samp, kbd, var, tt, form, fieldset, legend, label, input, textarea, option, .nobox { 
    background: transparent; 
    border: 0; 
    font-size: 100%; 
    margin: 0; 
    outline: 0; 
    padding: 0; 
    vertical-align: baseline; 
} 
user agent stylesheeta:-webkit-any-link { 
    color: -webkit-link; 
    text-decoration: underline; 
    cursor: auto; 
} 
Inherited from 
html, body, br, hr, div, span, a, object, iframe, ul, ol, dl, li, dt, dd, h1, h2, h3, h4, h5, h6, p, blockquote, q, address, small, big, cite, dfn, ins, del, i, em, b, strong, sup, sub, strike, pre, code, samp, kbd, var, tt, form, fieldset, legend, label, input, textarea, option, .nobox { 
    background: transparent; 
    border: 0; 
    font-size: 100%; 
    margin: 0; 
    outline: 0; 
    padding: 0; 
    vertical-align: baseline; 
} 
Inherited from 
html, body, br, hr, div, span, a, object, iframe, ul, ol, dl, li, dt, dd, h1, h2, h3, h4, h5, h6, p, blockquote, q, address, small, big, cite, dfn, ins, del, i, em, b, strong, sup, sub, strike, pre, code, samp, kbd, var, tt, form, fieldset, legend, label, input, textarea, option, .nobox { 
    background: transparent; 
    border: 0; 
    font-size: 100%; 
    margin: 0; 
    outline: 0; 
    padding: 0; 
    vertical-align: baseline; 
} 
Inherited from 
html, body { 
    height: 100%; 
    font-size: 13px; 
    font-family: 'Montserrat',sans-serif; 
} 
html, body, p, a, h1, h2, h3, h4, h5, h6 { 
    -webkit-font-smoothing: antialiased; 
    text-rendering: optimizeLegibility; 
} 
html, body, br, hr, div, span, a, object, iframe, ul, ol, dl, li, dt, dd, h1, h2, h3, h4, h5, h6, p, blockquote, q, address, small, big, cite, dfn, ins, del, i, em, b, strong, sup, sub, strike, pre, code, samp, kbd, var, tt, form, fieldset, legend, label, input, textarea, option, .nobox { 
    background: transparent; 
    border: 0; 
    font-size: 100%; 
    margin: 0; 
    outline: 0; 
    padding: 0; 
    vertical-align: baseline; 
} 
Inherited from 
html, body { 
    height: 100%; 
    font-size: 13px; 
    font-family: 'Montserrat',sans-serif; 
} 
html, body, p, a, h1, h2, h3, h4, h5, h6 { 
    -webkit-font-smoothing: antialiased; 
    text-rendering: optimizeLegibility; 
} 
html, body, br, hr, div, span, a, object, iframe, ul, ol, dl, li, dt, dd, h1, h2, h3, h4, h5, h6, p, blockquote, q, address, small, big, cite, dfn, ins, del, i, em, b, strong, sup, sub, strike, pre, code, samp, kbd, var, tt, form, fieldset, legend, label, input, textarea, option, .nobox { 
    background: transparent; 
    border: 0; 
    font-size: 100%; 
    margin: 0; 
    outline: 0; 
    padding: 0; 
    vertical-align: baseline; 
} 

我想了解爲什麼相同的規則重複一遍又一遍。它幾乎使理解僅僅是一個單一的元素很困難。

Answer 1

以在檢查中html, body, br....規則非常仔細地看。你會看到所有的選擇器都是灰色的，除了一個 - 突出顯示（不是灰顯規則）匹配/級聯到你正在檢查的元素。

我選擇這個計算器頁面上div.container和得到這個：

另外，如果你想只看到被應用到特定元素（而不是哪裏來的規則從），只是在檢查中選擇已計算標籤：

Answer 2

重複相同的規則，因爲它們是從上到下繼承的。將HTML文檔想象成一棵樹，越往葉子越遠，通過的層次越多，越多的屬性可能會從上層元素繼承（除非它們被覆蓋）。

在大多數檢測工具中，您可以隱藏繼承的屬性（或者它們顯示在不同的選項卡或樹結構中）。

[CSS inspector] http://s10.postimg.org/fnrutg7zb/computed_Styles.png

Answer 3

一些CSS規則是繼承。例如。如果您爲body指定font-size，它也會影響其所有子項。

因此，被檢查元素的每個父項都相應地從父項繼承了一些值。只要看看你的身體，你就會看到沒有遺傳的價值。看看內部的第一個元素，然後你會看到它獲得了一個繼承的值。現在看看它的孩子：它從身體和父母身上繼承了屬性（但它的父母從身體繼承了一些東西） - 你得到了兩次相同的繼承物。這一直持續到您的元素到達。

Answer 4

它顯示給定元素的繼承鏈。該元素可能在body之內，因此它從中繼承了某些屬性。這大概也在div之內，並且可能在ul和li等等之內。它從所有這些父對象繼承屬性。有些屬性會被更多的嵌套元素所覆蓋，在這種情況下，應該將父項的屬性劃掉（此列表底部的規則很可能會被刪除）。

在這種情況下，同樣的規則（html, body, br, ...）適用於許多元素。所以這個規則一次又一次地顯示出來，適用於每個父母。通常，應用於特定父級的特定部分（html或body等）應該突出顯示。

這使您可以一次通過DOM父母和應用CSS規則調試整個繼承鏈。你可以看到哪個父母爲你的元素添加了一個特定屬性的規則，或哪個屬性被哪個子項覆蓋了。如果您只想查看所有這些繼承的結果，請查看計算出來的屬性部分（位於此列表右側的Chrome中）。

Answer 5

您會看到適用於您的元素的所有CSS規則。 CSS規則可能會匹配多個元素（然後您會看到它在這裏描述）。

在Web檢查器中，您可以在CSS屬性之前選擇放大鏡查看哪些選擇器應用於此特定屬性。

Answer 6

如果你是初學者並且使用opensource css腳本， 它可能在你的opensource中包含一些重置腳本。 例如，@import「blabla/reset.css」 如果是這樣，請刪除此行