CSS获取要显示为块的元素的第一个子元素

Question

我找不到正确的选择器来选择带有类的div之后的第一个元素。

.eleSpacing {
  display: inline-block;
  margin: 0 2em;
}

div.eleSpacing:first-child {
  display: block;
}

<div class="eleSpacing">
  <label for="fiscalYear">Fiscal Year</label>
  <select id="fiscalYear"></select>
</div>

我希望label显示在select元素之上。

将内联样式设置为display:block;正是我想要的，但我无法找出正确的组合从CSS中选择它。

Answer 1

父母先行，然后是孩子。例如，如果我有一个类名为“.parent”的div，其中包含几个段落，如果我想将第一段设为红色，我会执行以下操作：

.parent p:first-child {
   color: red;
}

所以在你的情况下，以下应该工作：

div.eleSpacing label:first-child {
   display: block;
}

Answer 2

无需使用first-child，只需在CSS选择器中指定label：

.eleSpacing > label {
    display:block;
}

Answer 3

:first-child适用于它所附加的选择器。所以在你的问题中，你正在选择第一个.eleSpacing

label:first-child将在其兄弟姐妹中找到第一个标签。

.eleSpacing {
  display: inline-block;
  margin: 0 2em;
}

div.eleSpacing label:first-child {
  display: block;
}

<div class="eleSpacing">
  <label for="fiscalYear">Fiscal Year</label>
  <select id="fiscalYear"></select>
</div>