Question

我正在开发一个包含两页推荐书的网站。前两个推荐书将显示在主页上，然后其他三个推荐书将显示在原始推荐页面上。

原始推荐页面背景颜色与主页不同。我想更改推荐页面的文字颜色。我想知道是否可以使用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;

}

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

谢谢

Answer 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; }

Answer 2

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

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

Answer 3

逗号意味着两个选择器都具有相同的样式。不用逗号就可以尝试将它们组合起来：

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

更新：

由于您使用的是Wordpress，因此您可以使用以下相应的页面ID：

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

Answer 4

有不同的方法来实现这一目标。

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

.testimonial-author {
    color: $HOMEPAGE_COLOR;
}

添加主页的一些类正文标记并覆盖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;
}

我更喜欢后面的选项。

在另一页上更改相同div的颜色

4 个答案: