将多个div分组为一个div

Question

我不知道怎么做，或者这是否可能，我也不知道合适的术语来正确地搜索这个词。我想这是个简单的问题。

我有一个标志，我制作，使用一些图像和一些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">

当我这么做的时候，什么也没有出现。

Answer 1

将HTML更改为：

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

Answer 2

首先创建HTML，

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

现在您可以使用css来针对以下元素：

.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;
}

例如，.logo .layer4调用.logo的后代类.layer4