更改 wordpress 中的背景颜色和主要内容背景答案

【问题标题】：Changing the background color and the main content background in wordpress更改 wordpress 中的背景颜色和主要内容背景
【发布时间】：2018-07-31 00:17:50
【问题描述】：

我在这个话题上搜索了将近 1 个小时，但我找不到答案，因为你知道大多数 youtube 视频完全没用。我的网站在 WordPress 上，我想更改背景颜色以及特定页面

中的主要内容

这是我尝试添加到自定义 CSS 框的代码

.page-id-2
{
background: #FFFFFF
}

.page-id-2 .content {
background: #FFFFFF
}

什么都没做

这是我的网站：www.graspdating.com

【问题讨论】：

标签： javascript html css wordpress

【解决方案1】：

试试这个。您想要的选择器是 ID (#) 而不是类 (.)

编辑

.page-id-2 #content, 
.page-id-2 #content article,
.page-id-2 #content #search-2,
.page-id-2 #content .enl-widget-title,
.page-id-2 #content #secondary,
.page-id-2 #content .arc-entry-meta { background-color: #FFFFFF }

这应该完全“白化”内容区域的背景。如果您希望某些元素具有不同的颜色，则可以相应地删除。

【讨论】：

那改变了背景颜色，内容区域还是一样
我假设您正在谈论的“内容区域”位于article 元素中。所以你会使用相同的逻辑。 .page-id-2 #content, .page-id-2 #content article { background-color: #FFFFFF } 。请注意，您的页面上可能需要定位几个元素才能将背景完全变为白色。
如果您熟悉浏览器中的开发者工具，您可以查看 DOM 并在那里摆弄元素的 CSS。如果这回答了您的问题，您能否将我的回答标记为已接受？
要将答案标记为已接受，请单击答案旁边的复选标记以将其从灰色切换为已填充。

【解决方案2】：

您将需要使用另一个类属性覆盖当前类属性。有不同的方式可以覆盖属性。假设您的.site-content 有以下内容：

.blog .site-content { background: #eeeeee;}

例如以下任何一项都会覆盖它：

.blog .site-content { background: red !important;}
body .blog .site-content { background: red;}
.page-id-2 .blog .site-content { background: red;}
body.page-id-2 .blog .site-content { background: red;}

第一个“赢”了！important，一个钝器……其余的“赢”了选择器特异性；

也就是说，您可以通过选择器特异性 (https://www.w3schools.com/css/css_specificity.asp) 和/或使用 !important (https://css-tricks.com/when-using-important-is-the-right-choice/) 覆盖属性

【讨论】：

抱歉，这有点令人困惑，LegenJerry 给了我一个简单的代码，我已将它添加到自定义 CSS 框中，它确实改变了该页面上的背景颜色，但主要内容背景还是一样，有什么代码可以加吗？
我试图向你解释覆盖 CSS 属性的逻辑。如果您只是复制和粘贴代码而不了解发生了什么，它将无助于您的学习。如果您在浏览器上使用开发工具，您将能够检查为什么背景没有改变（developer.mozilla.org/en-US/docs/Learn/Common_questions/…）。所以设置你的元素.enl-page所需的背景，使用这个代码.post2.enl-page{ background: red; }

【解决方案3】：

你可以很容易地使用像

这样的依赖来做到这一点

body .page-id-2 { 背景：#FFFFFF; }

同样你也可以使用

body.page-id-63 #content { 背景：#FFFFFF; }

【讨论】：