jak*_*ies 3 html css css-selectors css-specificity
在浏览器中查看下面的代码时,背景为白色.通用选择器*具有最低的特异性,body选择器位于通用选择器之后.它不应该是灰色的吗？
* {
background-color: white;
}
body {
background-color: grey;
}
让我们分解问题中的代码:
* {
background-color: white;
}
body {
background-color: grey;
}
这是说:
body元素并使其背景颜色为灰色.好吧,如果通用选择器说选择所有元素,这将包括根元素(html).
所以代码计算为:
html {
background-color: white;
}
body {
background-color: grey;
}
根元素将画布绘制为白色,并且body元素没有高度,因此画布保持白色.
在页面中添加一些内容或指定高度body,您将看到灰色.
观察中的观察:
有趣.但是如果我们
*从等式中消除并且只是具有body,则页面将是灰色的,无论height是否指定.我不太明白为什么会这样.
因此,如果我们消除了通用选择器,background-color根元素会发生什么？
它重置为初始值:( transparent见:3.2.background-color属性)
而当background-color的html元素transparent,浏览器使用background-color的的body元素画在画布上.
对于文档根元素是一个HTML
HTML元素或XHTMLhtml元素:如果计算值background-image的根元素是none和它的background-colorIStransparent,用户代理必须改为从该元素的第一个HTML传播背景属性的计算值BODY或XHTMLbody子元素.该BODY元素的背景属性的已使用值是它们的初始值,并且传播的值被视为在根元素上指定它们.建议HTML文档的作者指定BODY元素的画布背景而不是HTML元素.
| 归档时间： |
|
| 查看次数： |
1055 次 |
| 最近记录： |