css - 相同的 css 类在不同的 url 上工作不同

Question

在我的网站上，我坚持使用一些 CMS。在我的 cms 中有一些粘性布局。现在我的客户需要两种不同的外观。

因此，当我在“主页”上时，我的 DIV 类测试显示不同，而当我在其他页面上时，同一类的工作会有所不同。

这是主页 .test { some data }

这是其他页面 .test { some data some data }

那么有没有办法在 css 中设置条件，如果我的 URL 是主页，那么调用它，否则调用它。

score 1 · Accepted Answer

您应该在您的正文上添加一个自定义类，例如页面名称。

<body class="home">
  ...
</body>

<body class="my_page">
  ...
</body>

然后你可以为每一个有不同的风格。

.home .test {
  background: red;
}

.my_page .test {
  background: blue;
}

score 0 · Accepted Answer

您不能使用 CSS 来检测 URL。因此，您需要使用 JavaScript 检测 URL（像这样），或者更好的是，在后端检测它。

score 0 · Accepted Answer

您可以使用 JavaSctipt 检测 URL，然后如果您在主页上，则再次使用 JavaScript 向正文添加一个额外的类。然后，您为这个新类中包含的元素编写单独的 CSS 样式。

score 0 · Accepted Answer

对于不同的页面（URL），相同的 css 不会有不同的工作方式，您可以做的一种方法是使用 JavaScript 更改内联样式。但是如果你想改变整个样式表会很痛苦。

另一种方法是，它不仅仅是检测 URL，您需要为不同的页面动态更改样式表。不同的样式表可能具有相同classes但具有不同的样式。

因此，创建单独的样式表并动态应用。

4 回答 4