1

I'm developing a website that will contain two pages for testimonials. The first two testimonials will be displayed on the home page, then the other three testimonials will be displayed on the original testimonial page.

The original testimonial page background-color is different from the home page. I want to change the text color of the testimonials page. I want to know if is it possible to change the style of the same div but in different page using the CSS attributes and selectors?

This is the class that I want to style differently not on home page but on original .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;
}

I've tried to use the below method:

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

}

but it changes on all the pages.

thank you

4

4 回答 4

2

您可能最好将您的推荐信包装在另一个 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; }
于 2013-07-03T09:03:15.613 回答
1

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

在您的主页中包含一个额外的 css 文件，例如 homepage.css 以及 testimonials.css，其中将包含 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;
}

我更喜欢后面的选项。

于 2013-07-03T08:59:58.640 回答
1

Comma means both selectors get the same styling. Try it without the comma to combine them:

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

UPDATE:

Since you are using Wordpress, you can use the following with the appropriate page id:

body.page-id-111 {
    color: red !important;
}
于 2013-07-03T08:58:06.873 回答
1

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

<script>
.testimonial-author {
color: #color;}  
</script>
于 2013-07-03T08:55:30.603 回答