为什么这些CSS规则经常重复？

Question

我正在网络检查器中查看单个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文档视为一棵树，你越接近叶子，你传递的级别越多，可能从上层元素继承的属性就越多（除非它们被覆盖）。

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

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

Answer 2

仔细查看检查器中的html, body, br....规则。您会看到所有选择器都是灰色的，除了一个 - 突出显示的（不是暗淡的规则）匹配/级联到您正在检查的元素。

我在这个stackoverflow页面上选择了div.container并得到了这个：

此外，如果您只想查看应用于特定元素的规则（而不是它们来自哪里），只需在检查器中选择计算标签：

Answer 3

它显示了给定元素的继承链。该元素可能在body内，因此它从中继承了某些属性。它可能也在div内，可能在ul和li之内，依此类推。它从所有这些父对象继承属性。一些属性将被更多嵌套元素覆盖，在这种情况下，父属性的属性应该被划掉（此列表底部的规则可能大部分被划掉）。

在这种情况下，相同的规则（html, body, br, ...）适用于许多元素。因此，对于它所应用的每个父级，此规则会一次又一次地出现。通常应突出应用于特定父级的特定部分（html或body等）。

这允许您同时通过DOM父项和适用的CSS规则调试整个继承链。您可以查看哪个父级向您的元素添加了特定属性的规则，或者哪个属性被哪个子级覆盖。如果您只想查看所有这些继承的结果，请查看计算属性部分（在此列表右侧的Chrome中）。

Answer 4

某些CSS规则是可继承的。例如。如果您为font-size指定body，它也会影响其所有子项。

因此，被检查元素的每个父元素都相应地从其父元素继承了一些值。只要看看你的身体就会看到没有遗传的价值观。查看正文内部的第一个元素，然后您将看到它获得了一个继承的值。现在看一下它的子节点：它继承了body和它的父节点的属性（但是它的父节点继承了一些东西） - 你得到了两次相同的继承的东西。这一直持续到你的元素到达。

Answer 5

您将看到适用于您的元素的所有CSS规则。 CSS规则可能与多个元素匹配（然后您将按照此处的描述看到它）。

在Web Inspector中，您可以在CSS属性之前选择放大镜，以查看哪些选择器应用于此特定属性。

Answer 6

如果您是初学者并使用opensource css脚本， 它可能包括在您的opensource中的重置脚本。 例如，@ import“blabla / reset.css” 如果是，请摆脱这一行