拉动前一个兄弟元素

Question

例如，您可以使用margin-right推送下一个兄弟，如下所示：

#parent {
  background: tan;
  font-size: 0;
}

#parent * {
  display: inline-block;
  width: 50px;
  height: 50px;
}

#child1 {
  background: teal;
  margin-right: 100px;
}

#child2 {
  background: olive;
}

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

我知道CSS中没有以前的兄弟选择器。但是，我想知道是否有解决方法，因此#child2可以将#child1拉到20px的距离。这是一个前后截屏：

注意：我不想向margin提供#child1值或更改HTML。应仅使用#child2来实现效果。

Answer 1

此代码适用于我，它不会触及＃child1而是#parent。 更改为类而不是ID只是为了显示相同的代码适用于所有人。

.parent {
  background: tan;
  font-size: 0;
  display: flex;
}

.parent * {
  display: inline-block;
  width: 50px;
  height: 50px;
}

.child1 {
  background: teal;
  margin-right: 100px;
}

.child2 {
  background: olive;
}

.child3 {
  background: red;
}

.parent > div:only-child {
  margin-right:100px;
  margin-left:0px;
}

.parent > div {
  margin-right:20px;
}

.parent > div:first-child:not(:last-child) {
  margin-left:60px;
}

<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
  <div class="child3"></div>
</div>
<br>
<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>
<br>
<div class="parent">
  <div class="child1"></div>
</div>

Answer 2

您只需要两行CSS：

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

或者使用flexbox模型，这更好：

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

看到它的实际效果：

#parent {
  background: tan;
  display: flex;
}

#parent * {
  width: 50px;
  height: 50px;
}

#child1 {
  background: teal;
}

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

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

Answer 3

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

首先，将display属性设置为flex到#parent元素。颠倒显示子元素的顺序

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

我们可以通过设置

来直观地纠正这个问题

  

顺序：-1到#child1。

然后我们将使用

解决＃child1

#parent>div:first-child+div

这意味着第一个div之后的下一个div，即#child1。然后设置样式。

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

＆＃13;

＆＃13;

#parent {
  background: tan;
  display: flex;
}

#parent * {
  width: 50px;
  height: 50px;
}

#child1 {
  background: teal;
  order: -1;
}

#child2 {
  background: olive;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

为了更好地理解，将鼠标悬停在#child2，然后就可以看到其上一个兄弟的颜色变化。

#child2:hover+div {
background: brown;
}

＆＃13;

＆＃13;

#parent {
  background: tan;
  display: flex;
}

#parent * {
  width: 50px;
  height: 50px;
}

#child1 {
  background: teal;
  order: -1;
}

#child2 {
  background: olive;
}

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

#child2:hover+div {
  background: brown;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

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

#parent > div:first-child:nth-last-child(2) {
    margin-left:60px;
    margin-right:20px;
}

这是一个工作小提琴： https://jsfiddle.net/06urn796/

删除第二个孩子，保留第一个孩子： https://jsfiddle.net/06urn796/1/

Answer 5

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

您可以使用CSS（仅限）来拉取上一个兄弟元素，而无需更改HTML吗？

这个问题的答案就像不满意一样简单：

不，没有。

即使更改阅读方向也不行。对不起。

Answer 6

#parent {
  background: tan;
  font-size: 0;
}

#parent * {
  display: inline-block;
  width: 50px;
  height: 50px;
}
#parent div{
  margin: 0px 20px;
}

#child1 {
  background: teal;
}

#child2 {
  background: olive;
}

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