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));)
-
Just re-define it somewhere after your
@importdirective:#content { height: 456px }for identical CSS selectors, the latter rule overwrites the former.
讨论(0) -
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.
讨论(0) -
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
#contentdefinition.讨论(0) -
In
page5.css, simply re-define the height.page5.css
#content { height:400px; }讨论(0)
加载中...
- 热议问题