How to give different style with css if 2 pages have same id?
in same site i have a page disclaimer 2 times in 2 different section
corporate > disclaimer.html consumer > disclaimer.html
one good this my company's custom cms is generates body id for each page
but the problem here is he generate id as same as page name, and i can't change name and can't give different ID
bot开发者_运维问答h pages having same id <body id="disclaimer">
and
i want to apply 2 different style to <p> to both pages
like
for corporate > disclaimer.html i need this p { color:#666}
for consumer > disclaimer.html i need this p { color:#000}
how to do this, is there any pure css way ? if it's not possible with pure css then give me jquery solution.
update:
i can't add per page basis css file in <head>.
It doesn't seem like you can do anything with pure CSS if the pages are identical except for the URL.
So pseudocode for a basic javascript solution:
var path, section, body;
path = window.location.pathname;
section = parseToSection(path);
body = window.document.body;
if ('corporate' === section){
body.addClass('corporate');
} else if ('consumer' === section){
body.addClass('consumer');
}
and then add rules like the following to your css:
body.corporate p{
color:#666
}
body.consumer p{
color:#000;
}
In your solution you might want to use jquery's element selectors instead of directly using the window object. Also writing the code for the parseToSection() function is up to you.
Can you just fetch two different css files on them?
Prepare three css files:
- for everything that's the same for all pages,
- for the Consumer-specific styles
- for the Corporate-specific styles
All pages will reference [1], then either [2] or [3] depending on which is relevant.
it's easy in jQuery:
$(document).ready(function() {
var color = (document.location.pathname.match(/corporate/)) ? "#666" : "#000";
$("body#disclaimer p").css("color", color);
}
but with pure CSS I think it is not possible.
加载中,请稍侯......
精彩评论