How can I apply CSS style changes just for one pag

2019-04-10 07:40发布

站内问答 / HTML/CSS
1087 4 4

I have two css files:

  1. A main file (main.css)

  2. 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?

4条回答
混吃等死
2楼-- · 2019-04-10 08:11

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

page5.css

#content {
    height:400px;
}
查看更多
0人赞 添加讨论(0) 举报
我想做一个坏孩纸
3楼-- · 2019-04-10 08:12

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.

查看更多
0人赞 添加讨论(0) 举报
在下西门庆
4楼-- · 2019-04-10 08:12

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

#content { height: 456px }

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

查看更多
0人赞 添加讨论(0) 举报
混吃等死
5楼-- · 2019-04-10 08:24

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

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

  1. On your page X, create a class at the body tag (body class="myclass").
  2. 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.
  3. Check the parent of the modified field.
  4. Add the HTML tag to your developer tool as testing
  5. 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.
  6. 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人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)