WooCommerce CSS背景全局生效问题：如何仅在指定页面/分类显示？

步骤1：获取目标页面/分类的专属body类 #

打开你要设置背景的页面，右键选择「检查」（或审查元素），找到页面最顶部的<body>标签，里面会有一串专属的class名称：

• 单页面通常会有类似page-id-xxx的类（xxx是页面的ID数字）
• 分类页面会有类似category-xxx的类（xxx是分类的别名slug）

步骤2：修改CSS代码，限定生效范围 #

把你原来的CSS选择器前面加上刚才找到的专属body类，这样样式就只会在对应页面生效：

示例1：针对指定单页面

.page-id-123 #content {
    background: url(IMAGE URL) repeat center bottom fixed !important;
    background-size: cover !important
}

把page-id-123替换成你实际找到的页面ID类即可。

示例2：针对指定分类页面

.category-travel #content {
    background: url(IMAGE URL) repeat center bottom fixed !important;
    background-size: cover !important
}

把category-travel替换成你实际的分类slug类即可。

额外提示 #

如果你的网站不是用WordPress这类自动生成body类的系统，也可以手动给目标页面的<body>标签添加自定义class（比如<body class="custom-target-page">），然后用.custom-target-page #content作为选择器来写CSS。

内容的提问来源于stack exchange，提问作者mastahlb