css - 如何在 CSS 中隔离页面和 div 背景颜色？

Question

我正在创建一个登录表单，但我无法让 BG 颜色按照我想要的方式工作。

我希望页面的整体背景颜色为蓝绿色 (#00CEB9)。我创建了一个具有不同背景的表单(我们只说红色用于演示)，但蓝绿色仍显示在框内。

我希望该框具有这样的 100% 红色背景(同时在页面的其余部分保持蓝绿色背景):

<div class="login-container">
  <form>
    <label for="login">Login</label>
    <input type="text" id="login">
    <label for="password">Password</label>
    <input type="text" id="password">
  </form>
</div>

CSS

html *{
  background-color: #00CEB9;
}

.login-container {
    margin: 8px auto;
    border: 3px solid #f1f1f1;
    padding: 8px;
    border-radius: 4px;
    width: 30%;
    text-align: center;
    background-color: red;
}

如何保持我的页面背景颜色并使表单框具有自己的背景颜色而不会相互污染？

Answer 1

尝试更改您的 CSS:

html *{
  background-color: #00CEB9;
}

到

html, body {
  background-color: #00CEB9;
}

通过将它应用于 html *，您可以将它应用于所有尚未分配背景颜色的元素。

参见 CSS Selectors Reference有关如何深入了解 CSS 选择器的更多信息。