css - 如何在类中嵌套选择器

Question

我想动态更改特定块项目中所有项目的属性。我设想 css 具有如下结构，但无法弄清楚执行此操作的确切语法。我会更改块项目的类 ID，即。cls1 和 cls2，使用 javascript 或类似的动态。

.cls1 {x: y=z1; ...
     h1 {}
     p {}
     img {}
     a {} ...
    }
.cls2 {x: y=z2; ...
     h1 {}
     p {}
     img {}
     a {} ...
    }
- - - - - - - - -
<div class="cls1">
    ...
    </div>

标签： css

Answer 1

使用直接的 CSS，语法如下所示：

.cls1 h1 {
  ...
}

.cls1 p {
  ...
}

.cls1 img {
  ...
}

.cls1 a {
  ...
}

.cls2 h1 {
  ...
}

.cls2 p {
  ...
}

.cls2 img {
  ...
}

.cls2 a {
  ...
}

使用像SASS这样的 CSS 预编译器，您可以使用问题中的语法。

.cls1 {
  h1 {...}
  p {...}
  img {...}
  a {...}
}

.cls2 {
  h1 {...}
  p {...}
  img {...}
  a {...}
}