如何正确编写特定页面类型下的多组嵌套CSS样式？

你用到的嵌套写法是CSS预处理器（比如Sass、Less）的专属语法，不属于原生CSS标准，直接在浏览器中运行时，部分旧版本或iOS端的浏览器会无法识别，出现兼容问题。

要实现全浏览器兼容，有两种可行方案：

方案一：原生标准展开式写法（推荐） #

这是所有浏览器都支持的原生CSS语法，也就是你最初写的形式，明确写出每个选择器的完整层级：

.service-page h1 {
    color: red;
}

.service-page .style1 {
    color: blue;
}

.service-page .style2 {
    color: pink;
}

这种写法没有任何兼容风险，是最稳妥的选择。

方案二：原生CSS嵌套选择器（需注意兼容性） #

最新的CSS标准引入了嵌套选择器，但目前还未完全覆盖所有浏览器（比如你提到的iOS端Chrome/Safari旧版本就不支持）。如果想用原生嵌套，必须遵循标准语法，在子选择器前加上&来指代父选择器：

.service-page {
    & h1 {
        color: red;
    }

    & .style1 {
        color: blue;
    }

    & .style2 {
        color: pink;
    }
}

但这种写法仅在支持CSS Nesting模块的现代浏览器中生效，无法兼容旧版本浏览器，不推荐在需要全兼容的场景下使用。

折中方案：用预处理器编译成原生CSS #

如果想保留嵌套写法的便捷性，同时保证全浏览器兼容，可以使用Sass、Less这类CSS预处理器。编写嵌套语法后，通过编译工具将其转换为原生CSS的展开式代码，再部署到项目中，既能享受嵌套的简洁性，又能确保所有浏览器都能正常识别样式。

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