如何在CSS/SCSS中嵌套调用类？现有代码无法生效求解决

你写的嵌套选择器是Sass/Less这类CSS预处理器的语法，原生CSS不支持这种嵌套写法，所以无法生效。另外要注意：.main和.cover是同级兄弟元素，需要用兄弟选择器来关联触发后的样式。

正确的原生CSS实现 #

根据两个元素的位置关系，有两种可选写法：

1. 相邻兄弟选择器（+） #

如果.cover是.main的直接下一个兄弟元素，用这个：

.main {
    width:100%;
    height:360px;
}

.cover {
    width:90%;
    height:200px;
}

.main:focus + .cover {
    margin-left:12px;
}

2. 通用兄弟选择器（~） #

如果.cover是.main之后的任意兄弟元素（不需要紧挨着），用这个：

.main {
    width:100%;
    height:360px;
}

.cover {
    width:90%;
    height:200px;
}

.main:focus ~ .cover {
    margin-left:12px;
}

补充说明 #

如果想保留嵌套写法，需要引入Sass、Less或PostCSS这类预处理器工具，它们会把嵌套语法编译成原生CSS后再生效。

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