如何实现CSS样式仅在page1或page2两个页面生效？

1. 分组选择器写法（兼容性最优，无额外兼容成本） #

和你现有为page1配置样式的逻辑完全对齐，只需将page2的匹配规则和原有规则合并为同一条CSS声明即可，代码如下：

.page1 .someClass p,
.page2 .someClass p {
    color: #cccccc;
}

• 匹配规则会精准命中两种场景：body带page1类、body带page2类时，对应页面下 .someClass 容器内的p标签
• 其他页面的body类名（如page3、page4等）完全不会进入匹配范围，绝对不会触发该样式变更
• 兼容所有版本的浏览器，包括老旧的低版本浏览器，没有任何使用门槛。

2. 精简选择器写法（长期维护效率更高） #

如果后续还需要追加同类型页面到样式生效范围，可以用:is()伪类简化重复的选择器片段，减少冗余代码：

:is(body.page1, body.page2) .someClass p {
    color: #cccccc;
}

注意：该写法在所有现代浏览器（Chrome、Edge、Firefox、Safari 15.4+）均可正常运行，若需要兼容更早版本的Safari或IE浏览器，优先选择第一种分组写法。

常见踩坑点 #

• 不要为了简化代码直接写全局选择器 .someClass p { color: #cccccc }，这种写法会让所有带.someClass类的页面都命中样式，完全不符合“仅page1、page2生效”的要求
• 不要使用排除逻辑编写规则，比如写成body:not(.page3) .someClass p { ... }，后续新增其他页面时很容易因为漏写排除规则导致样式误触发，精准指定生效范围才是维护成本最低的方案

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