Question

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

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

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

现在我的问题是→

第一个孩子是基于HTML编写的顺序？如果这是真的，那么不论它是否在浏览器中首先在浮动时向右浮动或第二次浮动时，它将始终保持第一个子节点，或者第一个或第N个子节点不基于它在HTML中编写的顺序，但在订单上，它会在浏览器中呈现。

我为什么要提出这些问题。

当有两个模板之间的唯一区别在于，侧边栏中的一个是离子而另一个侧边栏是右边的。更少的是没有理由创建单独的模板，因为整个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。该元素被标识为＆＃34; first-child＆＃34;有红色边框。

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 告诉浏览器浏览器在屏幕上呈现内容的方式/位置，它不能做出反应到呈现内容的地方，以便应用更多规则，这实际上就是你＆＃39 ;希望。

基于在浏览器中呈现的第一个孩子的父设置边距下的第一个孩子的概念

1 个答案: