css - 是否有可能有一个嵌套的 CSS，以便其中的所有规则只适用于某个元素的子元素？

Question

我知道我可以写:

#parentElement h1 {
    /*rules*/
}

#parentElement div {
    /*rules*/
}

等等等等

但是如果我有一个非常长的这样的规则列表，那么如果有一个语法我可以按照以下行写一些东西会非常方便:

#parentElement {
    h1 {
        /*rules*/
    }

    div {
        /*rules*/
    }
}

类似于媒体查询。

有这样的东西吗？我在 Google 上找不到任何东西，但这似乎是一个显而易见的想法，它以某种方式存在。

Answer 1

考虑以视觉辅助方式格式化您的样式:

.PARENT-ELEMENT-STYLES,

    .parentElement h1 {
        /*rules*/
    }

    .parentElement div {
        /*rules*/
    }


/*****************/
/*****************/


.CHILD-ELEMENT-STYLES,

    .childElement h1 {
        /*rules*/
    }

    .childElement div {
        /*rules*/
    }