强制更改整个背景颜色，忽略 div（HTML、CSS）

Question

我的网站有多个部分。我需要更改并覆盖每个部分的颜色以使其变为黑色。所以我有body 标签，我试图通过css 方面的标签来做到这一点。我将整个身体的背景颜色强制为黑色，就像这样。

body {
  background-color: #000;
}

但它没有用。它只会更改未包含在其自己的 div 或部分中的任何内容的背景。我正在尝试的可能吗？

Answer 1

将 HTML 元素想象成层。你有你的主层 (body) 并且你在上面放置了多个元素。如果你改变主层的颜色，它不会影响它上面的元素，因为它们在另一层之上。

你可以说每个元素都将它自己的层添加到 DOM，所以如果你想向下改变一些东西，你必须指定你的需求。

示例

body * {
  background-color: #000;
}

这将影响body标签下没有颜色设置的所有内容。

实现此目的的另一种方法是将所有内容重置为某个值，然后设置所需的元素。

在你的情况下：

* {
  background-color: transparent !important;
}

body * {
  background-color: #000 !important;
}

由于我在所有内容上都使用了!important 标志，因此在设置新值时必须使用它，因为!important 会覆盖特异性。

特异性水平：

Selector	Specificity value
* { }	0*
li { }	1 (one element – 0,0,0,1)
body#home div#featured p.text	213 (two id selectors, class selector, 3 HTML selectors – 0,2,1,3)
li:first-line { }	2 (one element, one pseudo-element – 0,0,0,2)
ul li { }	2 (two elements – 0,0,0,2)
#footer *:not(nav) li	23 (one id, two elements – 0,1,0,2)**
ul ol+li { }	3 (three elements – 0,0,0,3)
h1 + *[rel=up] { }	11 (one attribute, one element – 0,0,1,1)
ul ol li.first { }	13 (one class, three elements – 0,0,1,3)
li.last.featured { }	21 (two classes, one element – 0,0,2,1)
style=””	1000 (one inline styling – 1,0,0,0)
div p.big-text { }	12 (two HTML selectors and a class selector – 0,0,1,2)
#author-name { }	100 (one id selector – 0,1,0,0)
body #blog-list .post p { }	112 (id selector, class selector, 2 HTML selectors – 0,1,1,2)
navbar ul.menu li#first a:not(:visited) { }	133 (id selector, 2 class selectors, 1 pseudo-class, 3 HTML selectors – 0,1,1,2)

您可以阅读更多关于主题here