first child under parent 的概念 setting margin based on first child rendered in the browser

Question

<div class="parent">
    <div class="one"></div>
    <div class="two"></div>
</div>

以上是我在codepen上模拟的示例代码here。

child元素一和二可以向右或向左浮动，反之亦然；这意味着如果一个向右浮动，另一个可以向左浮动，反之亦然。

现在我的问题是 →

第一个child是按照HTML写的先后顺序？如果这是真的，那意味着无论它是在向右浮动时首先在浏览器中呈现，还是在向左浮动时在浏览器中呈现第二个，它将始终保持第一个 child 或第一个或第 N 个 child 不基于它在 HTML 中的书写顺序，但在浏览器中呈现的顺序。

我为什么要问这样的问题。

有些时候，尤其是在 wordpress 中，两个模板之间的唯一区别是一个侧边栏在左侧，而另一个侧边栏在右侧。 LESS IS MORE 没有理由创建一个单独的模板，因为整个 HTML 是相同的，但唯一的区别是 2 列的顺序。

所以我在想这样一种情况，如果我们可以在列上设置 margin-right，那么我们可以先使用一些 child 属性，这是在浏览器中最先出现的那个.

如果是这样的话→ https://codepen.io/codeispoetry/pen/xdymZJ

然后 margin-right 应该应用于 .one 但是如果我们颠倒顺序，绿色先出现然后蓝色然后 margin-right 应该应用于 .two

我不想通过 javascript 或 php 来做到这一点，但 CSS 可能会以某种方式利用 first child 属性。

Answer 1

这完全是根据元素在标记中出现的位置完成的。

查看第一个示例的更新版本：https://codepen.io/anon/pen/YVJdBX。标识为 "first-child" 的元素具有红色边框。

HTML:

<div class="parent">
    <div class="one child"></div>
    <div class="two child"></div>
</div>

CSS:

.parent {
  height: 900px;
  background-color: #FFFFFF;
}
.one {
  background-color: blue;
  height: 900px;
  float: right;
  width: 33%;
  margin-right: 30px;
}
.two {
  background-color: green;
  width:60%;
  height: 900px;
  float: left;
}

.child:first-child
{
  border:solid 1px red;
}

我认为你的建议行不通。 CSS 告诉浏览器 how/where 在屏幕上渲染东西，它不能反应渲染东西的地方，为了应用更多规则，这实际上是您所希望的。

first child under parent 的概念 setting margin based on first child rendered in the browser

The concept of first child under parent setting margin based on first child rendered in the browser

html

css

margin