How can I apply CSS style changes just for one page?

问题

I have two css files:

A main file (main.css)
A specific page file (page5.css). My page.css contains main.css (@import url(main.css));)

My main.css has this as one part of it that sets the height of the page

#content {
    background:url(../images/image.png) no-repeat;
    width:154px;
    height:356px;
    clear:both;
}

This works fine for all the other pages, but at page 5, I need a little bit more height.

How would I go about doing it?

回答1:

You don't even need a separate CSS file necessarily. You can add classes to your body for various purposes, identifying page or page type being one of them. So if you had:

<body class="page5">

Then in your CSS you could apply:

.page5 #content {
  height: XXXpx;
}

And it would only apply to that page as long as it occurs after your main #content definition.

回答2:

Just re-define it somewhere after your @import directive:

#content { height: 456px }

for identical CSS selectors, the latter rule overwrites the former.

回答3:

In page5.css, simply re-define the height.

page5.css

#content {
    height:400px;
}

回答4:

The other answers did not help me on a more complex page.

Let's suppose you want something different on page X.

On your page X, create a class at the body tag (body class="myclass").
Open the Developer tools (I use chrome) and select the item to be modified. Let's say it's a link ( a.class - 'class' is your class name of your anchor, so change it accordingly). The browser will give something rather generic that works on the developer tool - but messes up in real life.
Check the parent of the modified field.
Add the HTML tag to your developer tool as testing
f your new CSS path does not grey out, you are good. If it greys out, your selected path still needs fixing.
Let's suppose that the parent is a div with a class 'parent'. Add this path "div.parent >" to the already chrome selected a.class The symbol > means you are going up on the tree.
You can keep going backward on the DOM all the way to body.myclass, or you may not need. There is no need to add the classes for the parents, but you can add them if there are great similarities on your pages.

This works for me.

来源：https://stackoverflow.com/questions/5639234/how-can-i-apply-css-style-changes-just-for-one-page

标签

css

css-selectors

css-sprites