时间戳

首页 > 解决方案 > 强制更改整个背景颜色，忽略 div（HTML、CSS）

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

问题描述

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

body {
  background-color: #000;
}

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

标签： htmlcsstagsfrontendbackground-color

解决方案

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

您可以说每个元素都将其自己的层添加到 DOM，因此如果您想向下更改某些内容，则必须指定您的需求。

例子

body * {
  background-color: #000;
}

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

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

在你的情况下：

* {
  background-color: transparent !important;
}

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

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

特异性水平：

选择器 特异性值
* { } 0*
李{ } 1（一个元素 - 0,0,0,1）
body#home div#featured p.text 213（两个 id 选择器、类选择器、3 个 HTML 选择器 - 0、2、1、3）
李：一线{} 2（一个元素，一个伪元素 - 0,0,0,2）
ul li { } 2（两个元素 - 0,0,0,2）
#footer *:not(nav) li 23（一个id，两个元素——0,1,0,2）**
ul ol+li { } 3（三个元素 - 0,0,0,3）
h1 + *[rel=up] { } 11（一个属性，一个元素 – 0,0,1,1）
ul ol li.first { } 13（一个类，三个元素 - 0,0,1,3）
li.last.featured { } 21（两个类，一个元素 - 0,0,2,1）
风格=””</td> 1000（一个内联样式 - 1,0,0,0）
div p.big-text { } 12（两个 HTML 选择器和一个类选择器 - 0,0,1,2）
#作者姓名{} 100（一个 id 选择器 – 0,1,0,0）
正文 #blog-list .post p { } 112（id 选择器、类选择器、2 个 HTML 选择器 - 0、1、1、2）
导航栏 ul.menu li#first a:not(:visited) { } 133（id 选择器，2 个类选择器，1 个伪类，3 个 HTML 选择器 - 0,1,1,2）

您可以在此处阅读有关该主题的更多信息

推荐阅读