html - first child under parent setting margin 的概念基于浏览器中渲染的第一个 child

Question

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

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

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

现在我的问题是 →

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

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

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

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

如果是这样的话→ 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 告诉浏览器如何/在屏幕上呈现东西，它不能 react 东西被呈现的地方，以便应用更多规则，这实际上就是你希望。