html - 为什么这些 CSS 规则如此频繁地重复？

Question

我在 Web 检查器 [此处][1] 查看单个 span 元素(用于顶部菜单)。

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 文档想象成一棵树，越深入到叶子，传递的层次越多，从上层元素继承的属性就越多(除非它们被覆盖)。

在大多数检查工具中，您可以隐藏继承的属性(或者它们显示在不同的选项卡或树结构中)。

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