Question

我知道我可以写：

#parentElement h1 {
    /*rules*/
}

#parentElement div {
    /*rules*/
}

等等

但是如果我有一个非常长的这样的规则列表，那么我可以用以下方式编写一些语法非常方便：

#parentElement {
    h1 {
        /*rules*/
    }

    div {
        /*rules*/
    }
}

像媒体查询一样。

有这样的事吗？我无法在谷歌上找到任何东西，但似乎有一种明显的想法，它以某种方式存在。

Answer 1

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

.PARENT-ELEMENT-STYLES,

    .parentElement h1 {
        /*rules*/
    }

    .parentElement div {
        /*rules*/
    }


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


.CHILD-ELEMENT-STYLES,

    .childElement h1 {
        /*rules*/
    }

    .childElement div {
        /*rules*/
    }

是否可以使用嵌套CSS，以便其中的所有规则仅适用于某个元素的子元素？

1 个答案: