CSS背景属性如何影响子元素？答案

【问题标题】：How CSS background property effects the child elements?CSS背景属性如何影响子元素？
【发布时间】：2021-10-19 21:51:07
【问题描述】：

我刚刚练习 HTML 和 CSS 时，我注意到当我将 body 的背景颜色设置为红色时，包括 div 框在内的整个页面都会变成红色。我曾经认为，如果我们将 bg 颜色应用于 body，它只会改变 body 的背景颜色，而不是 body 内部的元素。但是为什么我的 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;
}

我的问题是为什么会出现这种行为，我不知道为什么我从未注意到它，但无论如何它都会发生。由于它的名称背景颜色，它应该只设置它应用到的元素的背景颜色，而不是子背景颜色，对吗？但是为什么会这样呢？

【问题讨论】：

是的，这是 HTML 中的默认设置，但是，您可以为子元素设置单独的颜色。
因为初始值为 background-color: transparent;这意味着它将显示背景中的任何内容（在您的情况下为主体）developer.mozilla.org/en-US/docs/Web/CSS/…
试试div { background-color:white }
我现在注意到它让我感到非常惊讶????。有一段时间我在 web 开发中不活跃，看起来我忘记了很多东西????。
@justsomeone 那么如何将其设置为仅将背景颜色应用于应用元素而不应用于子元素的东西？我知道我已经在问题结束时分享了一种方法，但他们也有其他方法吗？

标签： javascript html css background-color

【解决方案1】：

我不同意您关于背景颜色是继承的说法。 It simply is not.

发生的事情是你的身体包含其他 div。它是一个块元素，其他元素位于其中。作为一个块元素，它扩展了它的宽度和高度以适应它的子元素。因为子元素的默认颜色是透明的，所以它们看起来是红色的。但他们不是。

这可以通过将 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;
}

【讨论】：

现在我明白了。非常感谢您解释这一点。我也有同样的想法，但有点困惑，但现在很清楚了，谢谢你?。

【解决方案2】：

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>

【讨论】：

好的，我已经看到了，但是如果我们想更改默认行为怎么办？
您应该为要更改的每个元素设置不同的背景。
我觉得这个答案令人困惑。该问题与背景颜色有关，它不是继承的！