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

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

.eleSpacing > label {
    display:block;
}

Answer 2

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

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

因此，在您的情况下，以下内容应该有效：

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

Answer 3

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

.eleSpacing会在其兄弟姐妹中找到第一个标签。

label:first-child

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

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