拉取上一个兄弟元素答案

【问题标题】：Pull the previous sibling element拉取上一个兄弟元素
【发布时间】：2017-08-25 10:45:57
【问题描述】：

例如，您可以使用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 中没有 previous 兄弟 选择器。但是，我想知道是否有解决方法，所以#child2 可以将#child1 拉到20px 的距离。这是前后截图：

注意：我不想将margin 值赋予#child1 或更改HTML。应该只能使用#child2来达到效果。

【问题讨论】：

CSS 中没有 previous 兄弟 选择器。但是有一种干净有效的方法可以用 CSS 模拟这种行为：stackoverflow.com/a/36118012/3597276
嗨@Mike，我只是不太清楚总体目标。 pull .child1 到底是什么意思？可以发张图片吗？
@Michael_B：当然！这是前后截图。
@AbhishekPandey：您介意提供演示吗？
@Mike 我不明白这个问题。在第一个示例图像中，#child2 位于它所在的位置，因为它有 100px 的边距，但在第二个图像中它保持在原来的位置，但 #child1 更接近......

标签： html css css-selectors

【解决方案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>

【讨论】：

【解决方案2】：

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

首先，将显示属性设置为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;
}

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

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

为了更好地理解，悬停#child2然后你可以看到它之前兄弟的颜色变化。

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

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

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

【讨论】：

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

【解决方案3】：

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

你能否通过使用 CSS（仅）而不更改 HTML 来“拉出上一个同级元素”？

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

不，没有。

即使你改变阅读方向也不会。对不起。

【讨论】：

【解决方案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/

【讨论】：

【解决方案5】：

#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>

【讨论】：