Question

很长一段时间以来，我一直没有使用过CSS。我只是遇到了一个小问题。

让我说我的身体就是我的HTML文件：

<body>
<div id="header">
    <h1>Hello!</h1>
</div>
<div id="content">
</div>
<div id="footer"></div>
</body>

这是我的CSS文件：

* {
    margin:0px;
    padding:0px;
    background-color:#F6F6F1;
}

body {
    width:800px;
    margin-left:auto;
    margin-right:auto;
}

div {
    background-color:#F00;
}

为什么* -rule中的背景颜色会覆盖“div”-rule中的背景颜色？难道“div” - 规则更具体吗？如果我将背景颜色从* -rule放到“body”-rule，它就像我预期的那样工作。

非常感谢！

Answer 1

顶部div由h1完全填充，*已应用* { margin:0px; padding:0px; background-color:#F6F6F1; } body { width:800px; margin-left:auto; margin-right:auto; } div { background-color:#F00; }背景。下面的div是空的，所以没有背景可以填充。

将内容添加到下方div以查看其背景：

<div id="header">
    <h1>Hello!</h1>
</div>
<div id="content">foo
</div>
<div id="footer"></div>

{{1}}

Answer 2

背景颜色未被覆盖。

这里有2个问题：

1）没有给定高度和宽度的空div正在折叠，因此不会渲染。

2）你的h1确实有background-color:#F6F6F1，因此与div的背景重叠。

看到这个小提琴（h1上的透明背景，div上的红色背景）： http://jsfiddle.net/ammxmckz/

Answer 3

通用选择器的背景颜色应用于所有元素，包括标题<h1>元素。因此，虽然标题div确实获得了不同的背景，但<h1>标题会覆盖它。

例如，在标题上抛出一些余量，你会看到div的背景从后面偷看：

* {
    margin:0px;
    padding:0px;
    background-color:#F6F6F1;
}

body {
    width:800px;
    margin-left:auto;
    margin-right:auto;
}

div {
    background-color:#F00;
}

h1 {
    margin-left:100px;
}

<div id="header">
     <h1>Hello!</h1>

</div>
<div id="content"></div>
<div id="footer"></div>

Answer 4

它没有被覆盖。然而，

#content和#footer为空，因此您无法看到他们的背景。
#header具有红色背景色。但是，其内容为h1元素，与#header的背景重叠。 h1的背景颜色为#F6F6F1。

Answer 5

＆＃34;通用＆＃34;选择器是危险的属性，应该清除直接涉及样式的任何 CSS声明，ala background-color。今天唯一一个逐步使用通用选择器的用例是box-sizing之类的声明。

答案显而易见。无论您在何处应用背景颜色，它都会被位于其上方的任何元素隐藏。这是使用全局选择器的纯粹危险。

完成此操作的更有用的提示是不使用通用或全局＆＃34; 任何 UI样式的选择器。这是危险的，肮脏的，泥泞的，最糟糕的，可怕的。把它想象成Freddie Krueger。远离它。 ;）

覆盖背景颜色

5 个答案: