Html 如何仅对一个页面使用自定义css_Html_Css

Html 如何仅对一个页面使用自定义css

html css

Html 如何仅对一个页面使用自定义css,html,css,Html,Css,示例主题：我需要在分类页面：改变背景颜色因此，我添加了自定义css更改代码： .page-wrapper { background: black; } 但是当我保存这个自定义css时，主页上的颜色也会改变，产品卡上的颜色，购物车上的颜色，等等很自然，因为这个元素.page包装器在所有页面上都存在我有个问题，我不能干扰.phtml文件重命名，例如类别页面上的.page-wrapper-2 有没有其他方法可以通过纯css代码仅将颜色更改应用于类别页面示例？这样它就不会在其他

示例主题：

我需要在分类页面：

改变背景颜色

因此，我添加了自定义css更改代码：

.page-wrapper {
    background: black;
}

但是当我保存这个自定义css时，主页上的颜色也会改变，产品卡上的颜色，购物车上的颜色，等等

很自然，因为这个元素.page包装器在所有页面上都存在

我有个问题，我不能干扰.phtml文件重命名，例如类别页面上的.page-wrapper-2

有没有其他方法可以通过纯css代码仅将颜色更改应用于类别页面示例？这样它就不会在其他页面上出现了？

通过Google Chrome的开发工具查看html正文后，我注意到正文本身会根据您正在搜索的类别更改类。。。因此，您可以简单地使用body.category-consumer-electric标记作为.page包装器的父级。像这样：

body.category-consumer-electric.页面包装器{ 背景：黑色； } 请注意，您不应该仅使用>一个，因为我们不希望它是直接的孩子

如果你需要更多关于CSS选择器的指导，我建议你看看

希望这能回答您的问题。

如果您有权访问代码，您应该在要更改的元素上添加另一个类，并仅在该特定类上定义所需的CSS规则。如果magebig容器仅用于该页面，则可以使用它

如果您没有访问代码的权限，则可以使用CSS选择器对要更改的元素进行更具体的更改，以便在CSS文件中执行以下操作，例如：

div > p

选择父元素为元素的所有元素

你也可以在课堂上这样做！例如，在您的案例中：

.category-consumer-electric >.magebig-container{
background: black;

}

选择父容器所在的加载掩码。magebig容器

要了解更多CSS选择器，您可以查看：此处。

当您输入类别时，您似乎有如下HTML代码：

<body class="... catalog-category-view ...">
   ...
   <div class="... page-wrapper ...">
   ...
   </div>
   ...
</body>

.catalog-category-view > .page-wrapper {
    background: black;
}

真的谢谢，它工作得很好！我只想问你一件事。因为您可以在下面看到。行{}我还希望仅为产品类别将边距设置为0px。我尝试使用以下代码：.catalog category view>.row{margin right:0px；margin left:0px；}，但在本例中它不起作用。你能给我一个提示吗？谢谢如果具有.row类的元素不是主体的直接后代，则应使用如下选择器：.catalog category view.row{}