How to give different style with css if 2 pages have same id?_问答_开发者

How to give different style with css if 2 pages have same id?

开发者 https://www.devze.com 2022-12-17 08:28 出处：网络

in same site i have a page disclaimer 2 times in 2 different section corporate > disclaimer.html consumer > disclaimer.html

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

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.