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

我在Web檢查器中查看單個span元素（用於頂層菜單）[here] [1]。爲什麼這些CSS規則經常重複？

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; 
}

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

來源

2015-08-28 cade galt

您可以使用類似http://www.cleancss.com/css-beautify/的內容來查看正在進行的操作，只需粘貼整個CSS，然後爲你美化它。 – GOB

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

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

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

來源

2015-08-28 11:45:22 Adam

@cadegalt - 'font-size：100％'匹配所選元素並且正在應用，但刪除線表示級聯中更具體的規則覆蓋它。 – Adam

@cadegalt - 它們是包含在CSS代碼中匹配選擇器的特定代碼塊中的規則，但不適用於正在檢查的當前元素的規則。由於'margin'並不是繼承的，但'font-size'是，那麼瀏覽器的CSS解析器會將'html'標籤上的'font-size'規則應用於後代元素，但它不適用於'margin對於後代元素（即使'margin：0; font-size：100％;'包含在同一個CSS代碼塊中） – Adam

能夠追蹤級聯是很有用的，所以如果你刪除了'font- size：13px'，那麼你可以看到哪個規則，如果有的話，級聯的更深層次會被應用到你的元素上，更重要的是，'html'元素上的'margin：0'這樣的規則不會被子div，它們只是在檢查器中顯示，因爲它駐留在CSS中的繼承規則的相同代碼塊中。 – Adam

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

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

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

來源

2015-08-28 11:45:05 user1438038

確切地說。當一個屬性被另一個規則覆蓋時，它將在檢查器中顯示具有透視文字。爲了擺脫所有的混亂，只需隱藏繼承的屬性。它會幫助你更好地理解實際結構。 – user1438038

在屬性樹的頂部有一個複選框，表示**顯示繼承的**。取消它。 – user1438038

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

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

來源

2015-08-28 11:45:28 smnbbrv

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

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

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

來源

2015-08-28 11:45:29 deceze

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

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

來源

2015-08-28 11:47:56

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

來源

2015-08-28 12:19:39

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

回答

相關問題