如何仅针对特定页面申请 CSS

Question

我已经阅读了这个网站上的一些主题。 我找到了一些解决方案。 目前我为我们的代码实现了这个解决方案，但我遇到了一些问题。

我需要的：

样品产品模板https://feerdi.pl/rochas-girl-eau-de-toilette-spray-40ml-avmpcf-ygfcx-261249.html

1. 我只需要为产品页面更改 bg color .page-wrapper 。 当我添加此代码时：

CSS 代码

page-wrapper .page-main { background: #eceff1;}

然后所有页面上的颜色都会发生变化（当然因为这个元素在不同的页面上使用）。

所以对上面的代码.catalog-product-view >我添加：

.catalog-product-view > .page-wrapper .page-main {
background: #eceff1;

}

现在 bg 颜色更改仅在此产品页面上正确。 工作正常。

描述问题：

1. 以同样的方式，我也尝试改变：

一个）

.max-100 .container {
    max-width: 85%;
}

要仅在产品页面上应用此更改，我尝试如下操作：

.catalog-product-view .page-wrapper .page-main .max-100 .container {
    max-width: 85%;
} 

或者

.catalog-product-view > .page-wrapper .page-main .max-100 .container {
    max-width: 85%;
} 

但在这种情况下，我看不到任何变化。 我认为它给出了错误的 CSS 路径。

b）在元素<div class="container main-container">我也尝试将 bg 颜色更改为白色。

我尝试这样：

.catalog-product-view > .container {
background: white;
}

但我也没有看到变化。 我认为它在这里也给出了错误的 CSS 路径。 任何人都可以看看我们的模板并帮助指导我们走上正确的道路吗？ 谢谢！