Html 拉取上一个同级元素

例如，您可以使用

marginright

，推送下一个兄弟，如下所示：

#父级{
背景：谭；
字号：0；
}
#家长*{
显示：内联块；
宽度：50px；
高度：50px；
}
#孩子1{
背景：水鸭；
右边距：100px；
}
#孩子2{
背景：橄榄；
}

#父级{
背景：谭；
字号：0；
}
#家长*{
显示：内联块；
宽度：50px；
高度：50px；
}
#上级部门{
利润率：0px 20px；
}
#孩子1{
背景：水鸭；
}
#孩子2{
背景：橄榄；
}

---

以前没有使用纯CSS的同级选择器。 可能的解决方法是使用CSS flexbox

首先，将display属性设置为#父元素的

flex

。颠倒显示子元素的顺序

<div id="child2"></div>
<div id="child1"></div> 

这意味着第一个div之后的下一个div，即

#child1

。然后设置样式

#parent>div:first-child+div {
margin-right: 20px;
margin-left: 80px;
}

#父级{
背景：谭；
显示器：flex；
}
#家长*{
宽度：50px；
高度：50px；
}
#孩子1{
背景：水鸭；
顺序：-1；
}
#孩子2{
背景：橄榄；
}
#父级>div：第一个子级+div{
右边距：20px；
左边距：80px；
}

---

我不确定OP是不是在问这个问题，但是下面的代码只在第二个孩子存在时才拉第一个孩子，所以从某种意义上说，第二个孩子拉第一个孩子：）

这是一把小提琴：

移除第二个子对象时，第一个子对象保持不变：

---

根据您对给定答案的回答，您的问题应该是：

您是否可以使用CSS（仅限）在不更改HTML的情况下“提取上一个同级元素”

这个问题的答案很简单，就是令人不满意：

不，没有。

---

即使你改变阅读方向也不行。很抱歉。

这段代码对我很有用，它不涉及孩子，而是涉及家长。更改为类而不是ID只是为了显示相同的代码适用于所有对象

.parent{
背景：谭；
字号：0；
显示器：flex；
}
.家长*{
显示：内联块；
宽度：50px；
高度：50px；
}
.儿童1{
背景：水鸭；
右边距：100px；
}
.儿童2{
背景：橄榄；
}
.儿童3{
背景：红色；
}
.parent>div:独生子女{
右边距：100px；
左边距：0px；
}
.parent>div{
右边距：20px；
}
.parent>div:第一个子项：非（：最后一个子项）{
左边距：60像素；
}

您只需要两行CSS：

#child2 {
  float: left;
  margin: 0 -120px 0 150px;
}

或者使用flexbox型号，哪个更好：

#child2 {
  order: -1;
  margin: 0 -120px 0 150px;
}

在行动中看到它：

#父级{
背景：谭；
显示器：flex；
}
#家长*{
宽度：50px；
高度：50px；
}
#孩子1{
背景：水鸭；
}
#孩子2{
背景：橄榄；
顺序：-1；
利润率：0-120px 0-150px；
}

CSS中没有以前的同级选择器。但是有一种干净有效的方法可以用CSS模拟这种行为：嗨@Mike，我只是不太清楚总体目标。拉

.child1

到底是什么意思？你能发张照片吗？@Michael_B:当然！这是一个前后截图。@AbhishekPandey:你介意提供一个演示吗？@Mike，我不明白这个问题。在第一个示例图像中，

#child2

位于它所在的位置，因为右边有100px的边距，但在第二个图像中，它一直保持在原来的位置，但是

#child1

更近了……我正在寻找一种只使用CSS而不接触HTML的解决方案。@Mike你说的不接触HTML是什么意思？@Mike，我们只是颠倒子元素的顺序，并使用CSS重置它。所以在视觉上它们看起来是一样的。@Mike Pure CSS解决方案不可能AFAIKI添加了悬停代码来显示如何选择上一个兄弟姐妹

#child2 {
  float: left;
  margin: 0 -120px 0 150px;
}

#child2 {
  order: -1;
  margin: 0 -120px 0 150px;
}