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

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

将多个Div分组为一个div

2 个答案: