为什么这些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规则经常重复？

回答

相关问题