在另一个页面上更改相同 div 的颜色答案

【问题标题】：change color of the same div when on another page在另一个页面上更改相同 div 的颜色
【发布时间】：2013-06-30 21:06:25
【问题描述】：

我正在开发一个网站，其中将包含两个页面用于推荐。前两个评价会显示在首页，后三个评价会显示在原评价页。

原始推荐页面背景颜色与主页不同。我想更改推荐页面的文本颜色。我想知道是否可以使用 CSS 属性和选择器更改同一 div 但在不同页面中的样式？

这是我想在主页上而不是在原始 .testimonial 页面上设置不同样式的类

.testimonial-author {
color: #14C2E7;
font-family: 'lobster_1.4regular';
font-size: 35pt;
height: auto;
line-height: 0;
position: absolute;
text-shadow: 1px 1px #000000;
width: 850px;
}

我尝试使用以下方法：

.other-pages-background, .testimonial-author{
color: red !important;

}

但它在所有页面上都会发生变化。

谢谢

【问题讨论】：

您是否使用任何 cms 或这些是静态 html 页面？你能发布你的页面链接吗
我使用 wordpress，带有我设计的推荐插件

标签： html css css-selectors

【解决方案1】：

您最好将主页上的推荐信包装在另一个 div 中，这样您就可以使用 CSS 来定位主页上的推荐信，而不会影响推荐信页面本身。

例如；在您的主页上，您可以拥有

<div class="homepage-testimonials">
    <div class="testimonials">
        <div class="testimonial-author">John Doe</div>
    </div> 
</div>

你的 CSS；

.homepage-testimonials .testimonial-author { color: red; }

【讨论】：

@Arthur 代替 homepage-testimonials 您还可以使用特定于这些页面的正文标签 ID 和/或类
是的，这也可以。但是，如果该页面上有任何其他 div 具有相同的类名，并且不需要设置不同的样式，那么这是行不通的。虽然这可能永远不会发生。

【解决方案2】：

逗号表示两个选择器的样式相同。尝试不使用逗号将它们组合起来：

.other-pages-background .testimonial-author{
    color: red !important;
}

更新：

由于您使用的是 Wordpress，因此您可以将以下内容与适当的页面 id 一起使用：

body.page-id-111 {
    color: red !important;
}

【讨论】：

【解决方案3】：

有不同的方法可以实现这一点。

在您的主页中包含一个额外的 css 文件，例如 homepage.css 以及 testimonials.css，其中将包含 css 以覆盖默认颜色。

.testimonial-author {
    color: $HOMEPAGE_COLOR;
}

为你的主页添加一些 class body 标签并覆盖下面的 css 属性。

HTML

<body class="homepage">

CSS

/* Will be applied in Testimonial page */
.testimonial-author {
color: #14C2E7;
font-family: 'lobster_1.4regular';
font-size: 35pt;
height: auto;
line-height: 0;
position: absolute;
text-shadow: 1px 1px #000000;
width: 850px;
}

/* Will be applied in Homepage */
.homepage .testimonial-author {
color: #14C2E7;
}

我更喜欢后面的选项。

【讨论】：

【解决方案4】：

当您加载页面时，要求 php 在 css 加载后写入头部

<script>
.testimonial-author {
color: #color;}  
</script>

【讨论】：