Css 将多个div分组为一个div

我不知道如何，或者这是否可能，也不知道正确的术语，以便正确地搜索这个。我想这是一个简单的问题

我用一些图片和CSS制作了一个徽标。图像由几个层组成，每个层都是它自己的层

我的代码与此类似：

.logo .layer1 {
}
.logo .layer2 {
}
.logo .layer3 {
}
.logo .layer4 {
}

当我这样称呼每个div时，它工作得很好：

<div class="layer1">
<div class="layer2">
<div class="layer3">
<div class="layer4">

但我的问题是，如果可能的话，我怎么能打电话给：

<div class="logo">

执行此操作时，不会显示任何内容。

将HTML更改为：

<div class="logo">
  <div class="layer1"></div>
  <div class="layer2"></div>
  <div class="layer3"></div>
  <div class="layer4"></div>
</div>

先创建HTML

<div class="logo">
  <div class="layer1"></div>
  <div class="layer2"></div>
  <div class="layer3"></div>
  <div class="layer4"></div>
</div>

---

e、 g..logo.layer4调用.logo的后代类.layer4

那么，我必须列出每个层？我不能简单地调用“”并让它自动调用与其关联的各个层？它们应该在HTML中创建，这样浏览器就知道应该显示它们。css不会在HTML代码中为您创建任何div。@level42您可以有四个div，都带有class=“logo”，如果这是您的意思的话。谢谢ZeroAnquiem，这就是我想知道的全部内容。您的“call”是什么意思？在HTML中设置。当我添加这个时，我的意思是当我“调用”某个东西时。你用“.logo”调用它，但它不调用任何.logo.layers。那么，你可以通过.logo.layerX调用它们？这个问题真的很难理解。祝你好运

.logo .layer1 {
  background: url('something.jpg') top left no-repeat;
}
.logo .layer2 {
  background: url('something.jpg') top right no-repeat;
}
.logo .layer3 {
  background: url('something.jpg') bottom left no-repeat;
}
.logo .layer4 {
  background: url('something.jpg') bottom right no-repeat;
}