Question

我有一个图形元素，我想要位于另一个元素之上。因为我不想为那些没有重用的人创建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;
}

加

感谢您的所有投入。现在我明白了我的错误（psuedo类应用于子元素）

我已经编制了样本来解决我的问题但是我实际上是为<img>元素执行此操作，其中一个<img>位于另一个<img>之上而html结构是

<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示例那样工作。我想这是因为还有另一个需要考虑的锚元素。

Answer 1

您应该使用.wrapper > div:first-child和.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;
}

：第一个孩子，：最后一个孩子不工作

1 个答案: