如何仅对一页应用 CSS 样式更改？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5639234/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I apply CSS style changes just for one page?
提问by Asim Zaidi
I have two css files:
我有两个 css 文件：
A main file (main.css)
A specific page file (page5.css). My page.css contains main.css (@import url(main.css));)
一个主文件（main.css）
特定的页面文件 (page5.css)。我的 page.css 包含 main.css (@import url(main.css));)
My main.css has this as one part of it that sets the height of the page
我的 main.css 将此作为设置页面高度的一部分
#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.
这适用于所有其他页面，但在第 5 页，我需要更高的高度。
How would I go about doing it?
我将如何去做？
回答by mVChr
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:
您甚至不一定需要单独的 CSS 文件。您可以出于各种目的向正文添加类，识别页面或页面类型就是其中之一。所以如果你有：
<body class="page5">
Then in your CSS you could apply:
然后在您的 CSS 中，您可以应用：
.page5 #content {
height: XXXpx;
}
And it would only apply to that page as long as it occurs after your main #contentdefinition.
并且它仅适用于该页面，只要它出现在您的主要#content定义之后。
回答by Pekka
Just re-define it somewhere after your @importdirective:
只需在您的@import指令之后的某处重新定义它：
#content { height: 456px }
for identical CSS selectors, the latter rule overwrites the former.
对于相同的 CSS 选择器，后一条规则覆盖前者。
回答by Dutchie432
In page5.css, simply re-define the height.
在 中page5.css，只需重新定义高度。
page5.css
页面5.css
#content {
height:400px;
}
回答by user2060451
The other answers did not help me on a more complex page.
其他答案在更复杂的页面上对我没有帮助。
Let's suppose you want something different on page X.
假设您想要在第 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.
- 在您的页面 X 上，在 body 标记处创建一个类 (body class="myclass")。
- 打开开发者工具（我用的是chrome），选择要修改的项目。假设它是一个链接（ a.class - 'class' 是您的锚点的类名，因此相应地更改它）。浏览器将提供一些适用于开发人员工具的相当通用的东西 - 但在现实生活中会一团糟。
- 检查已修改字段的父级。
- 将 HTML 标记添加到您的开发人员工具中作为测试
- 如果你的新 CSS 路径没有变灰，你很好。如果它变灰，则您选择的路径仍需要修复。
让我们假设父级是一个带有“父级”类的 div。将此路径“div.parent >”添加到已选择的 chrome 中 a.class 符号 > 表示您正在上树。 - 您可以在 DOM 上一直倒退到 body.myclass，或者您可能不需要。无需为父级添加类，但如果您的页面有很大相似之处，则可以添加它们。
This works for me.
这对我有用。
