我只是在练习HTML和CSS时，我注意到，当我设置正文的背景色为红色时，整个页面包括div框都变成了红色。我曾经认为，如果我们对body应用bg颜色，它只会改变body的背景颜色，而不会改变body内部的元素。但是为什么我的div的背景色也变成了红色??我必须手动设置div的颜色，这样它们就不会和父div的颜色相同。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body{
background-color:red; // Relevant line!
}
.container {
width: 400px;
/* border: 1px solid grey; */
border-radius: 5px;
padding: 10px;
margin: 20px auto;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.heading {
padding: 10px;
margin: 0px;
text-align: center;
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
"Lucida Sans", Arial, sans-serif;
background-color: rgba(45, 45, 45, 0.1);
}
/* container 2 styling */
.css-utility > li:nth-child(1) {
opacity: 0.7;
}
.css-utility > li ul li:nth-child(1) {
text-transform: lowercase;
}
.css-utility > li ul li:nth-child(2) {
text-transform: uppercase;
}
.css-utility > li ul li:nth-child(3) {
text-transform: capitalize;
}
.css-utility > li:nth-child(3) p {
font-weight: 900;
}
.css-utility > li:nth-child(4) p {
line-height: 30px;
letter-spacing: 3px;
background-color: aliceblue;
}
/* container 2 styling ends */
/* container 3 styling */
.box , .bg-test {
width: 100%;
height: 200px;
margin: 10px 0px;
}
.container > .box:nth-child(2) {
background: linear-gradient(35deg, #9b59b6, #3498db);
}
.container > .box:nth-child(3) {
background: repeating-linear-gradient(
35deg,
yellow 0px,
yellow 30px,
black 30px,
black 60px
);
}
/* styling for container 3 ends here */
/* styling for container 4 starts here */
</style>
</head>
<body>
<h2 align="center">
Practice
</h2>
<!-- container 1 -->
<div class="container">
<h4 class="heading">HTML utility tags</h4>
<hr />
<ol>
<li>
<p>strong tag make the text <strong>bold</strong></p>
</li>
<li>
<p>U tag add <u>underline</u> to the text</p>
</li>
<li>
<p>em tag make the text <em>italic</em></p>
</li>
<li>
<p>s tag make the text <s>strickthrough</s></p>
</li>
</ol>
</div>
<!-- container 2 -->
<div class="container">
<h4 class="heading">Css utility properties</h4>
<ol class="css-utility">
<li>
<p>Opacity css property</p>
</li>
<li>
<p>Text Transform Property</p>
<ul>
<li>Text transform - Lower Case</li>
<li>Text transform - Upper Case</li>
<li>Text transform - Capitalize Case</li>
</ul>
</li>
<li>
<p>Font-weight property</p>
</li>
<li>
<p>Line Height and letter spacing</p>
</li>
</ol>
</div>
<!-- End of the container 2 -->
<!-- container 3 -->
<div class="container">
<h4 class="heading">linear gradient and Strips</h4>
<div class="box"></div>
<div class="box"></div>
</div>
<!-- container 3 ends -->
<!-- container 4 starts -->
<div class="container bg">
<h4 class="heading">
Testing background color
</h4>
<div class="bg-test">
</div>
</div>
</body>
</html>我试着在div里面放div，结果是一样的。给父div设置背景色会使子div具有相同的颜色。
我知道这可以通过使用*选择器
重置*
{
background-color:white;
}
我的问题是为什么这种行为，我不知道为什么我从来没有注意到它，但无论如何它发生了。作为它的名称背景色，它应该只设置它所应用的元素的背景色，而不是子背景色，对吧?但为什么会这样呢?
我不同意你关于background-color是继承的说法。
实际情况是你的身体包含其他潜水者。它是一个块元素其他元素也生活在其中。作为一个块元素，它扩展它的宽度和高度以适合它的子元素。因为子元素的默认颜色是透明的，所以它们看起来是红色的。但他们不是。
这可以通过将div绝对放置在其父元素之外来证明。您将看到子对象没有父对象的背景颜色。请看下面的例子。
#red{
width:100%;
height:100px;
color:white;
background-color:red;
}
#green{
width:100%;
height:100px;
color:blue;
background-color:green;
}
#red-child{
position:absolute;
top:150px;
}<body>
<div id="red">
i'm a red div text which is inside my parent element (relative positioning)
<div id="red-child">
i'm a red div text which is absolutely positioned outside my parent element. Font color is inherited, background color is not.
</div>
</div>
<div id="green">
i'm a green div text which is inside my parent element (relative positioning)
</div>
</body>结论:由于它们的定位和默认的透明背景色，这是预期的行为。如果您希望子元素具有不同的颜色，请为所有div元素使用默认的背景色，并在必要时覆盖
div{ /* for divs only */
background-color:white;
}
*{ /* for all elements */
background-color:white;
}
background-color的默认值是transparent，所以当你没有指定背景色时，它会显示它的父背景色。
这里有一个样本，希望对你有帮助。
.div1 {
background-color: red;
}
.div2 {
background-color: green;
}<div class="div1">
I am red.
<div class="div2">
I am green.
<div class="div3">
My background color is transparent so I am green too.
</div>
</div>
</div>