0

我有一个图形元素，我想将它放置在另一个元素之上。因为我不想为那些没有重用的 CSS 选择器创建 css 选择器，所以我应用了 psuedo 类。:first-element应该位于另一个之上的那个被另一个元素隐藏了。

这是我的JS BIN

HTML

<div class="wrapper">
    <div></div>
    <div></div>
</div>

CSS

.wrapper {
  position: relative;
}
.wrapper:first-child {
  position: absolute;
  width:50px;
  height:50px;
  top:25px;
  left: 25px; 
  background: red;
  z-index: 100;
}
.wrapper:last-child {
  position: relative;
  width:100px;
  height:100px;
  background: orange;
}

添加

感谢您的输入。现在我明白我在哪里弄错了（要应用于子元素的伪类）

我已经编写了示例来隔离我的问题，但我实际上是针对一个位于另一个之上 且 html 结构为的<img>元素执行此操作<img><img>

<div class="brand">
    <a href="#"><img src=""/></a>
    <a href="#"><img src=""/></a>
</div>

CSS是

.brand img:last-child {
    position: relative;
}
.brand img:first-child {  
    position: absolute;
    top:10px;
    left:15px;
}

它们不像简单的 div 示例那样工作。我想那是因为还有另一个锚元素需要考虑。

4

1 回答 1

5

您应该使用.wrapper > div:first-childand.wrapper > div:last-child来代替。

.wrapper > div:first-child {
  position: absolute;
  width:50px;
  height:50px;
  top:25px;
  left: 25px; 
  background: red;
  z-index: 100;
}
.wrapper > div:last-child {
  position: relative;
  width:100px;
  height:100px;
  background: orange;
}

根据您的编辑：

你应该这样做

.brand a:last-child img {
    position: relative;
}
.brand a:first-child img {  
    position: absolute;
    top:10px;
    left:15px;
}
于 2013-09-15T11:01:18.393 回答