如何仅对一个页面应用 CSS 样式更改？

Question

10

我有两个CSS文件：

我的main.css文件中有一部分设置了页面的高度。

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

这对于其他页面来说都很好用，但是在第五页，我需要更多的高度。我该怎么做呢？

- Asim Zaidi

刚才在第五页上覆盖它。 - clamchoda

5个回答

2

在@import指令之后的任意位置重新定义即可：

#content { height: 456px }

对于相同的CSS选择器，后面的规则会覆盖前面的规则。

- Pekka

1

在 page5.css 中，只需重新定义高度即可。

page5.css

#content {
    height:400px;
}

- Dutchie432

0

其他回答对于我更复杂的页面没有帮助。

假设您想在页面X上获得不同的东西。

在页面X上，在body标签上创建一个类（body class="myclass"）。
打开开发者工具（我使用chrome），选择要修改的项目。假设它是一个链接（a.class - 'class'是您锚点的类名，请相应地更改）。浏览器会给出一个相当通用的开发人员工具，但在现实中会出错。
检查已修改字段的父级。
将HTML标记添加到您的开发人员工具中进行测试
如果您的新CSS路径未变灰，则很好。如果它变灰了，则仍需修复所选路径。
假设父项是具有类“parent”的div。将此路径“div.parent >”添加到已选择的a.class之前。符号>表示您正在向上移动树。
您可以在DOM上向后继续全部走到body.myclass，或者您可能不需要。母版的类不需要添加，但是如果页面上有很大的相似之处，可以添加它们。

这对我有效。

- user2060451

0

你可以使用'id'来实现。

HTML

<a id="contact" href = "mailto: sarahwallpaperssw@gmail.com">Contact us.</a>

CSS

#contact{
   text-decoration: none !important;
   font-size: x-large;
}

- Sheikh Wahab Mahmood

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mVChr · Accepted Answer

您甚至不需要一个单独的CSS文件。您可以向中添加类来实现各种目的，其中之一是识别页面或页面类型。所以如果您有：

<body class="page5">

那么在你的CSS中，你可以应用：

.page5 #content {
  height: XXXpx;
}

只有在您的主要#content定义之后出现时，它才会应用于该页面。