仅当多个 CSS 样式位于确定的样式内时，正确的语法是什么？

Question

我正在尝试仅为特定类型的页面定义一些 CSS 规则。

仅当多个 css 样式位于确定样式内时，正确的语法是什么？

我知道它是这样工作的：

.service-page h1 {
        color: red;
    }

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

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

但我想要类似我尝试过的语法。它也适用，但不适用于所有浏览器，特别是 iOS Chrome 或 Safari：

.service-page {

    h1 {
        color: red;
    }

    .style1 {
        color: blue;
    }

    .style2 {
        color: pink;
    }
}

Answer 1

.服务页面{

& h1 {
    color: red;
}

.style1 {
    color: blue;
}

.style2 {
    color: pink;
}

}

用这个。希望它会起作用。