CSS技术问题：如何选中eleSpacing类div内首个子元素设为display:block？

嘿，这问题很好搞定！你已经找对了关键属性 display: block，只是需要把它应用到正确的目标元素上——也就是.eleSpacing容器里的<label>标签，而不是容器本身。

正确的CSS写法 #

你只需要新增这一行样式就能实现需求：

.eleSpacing label {
  display: block;
}

结合你现有的CSS代码，完整的样式应该是这样：

.eleSpacing { 
  display: inline-block; 
  margin: 0 2em; 
}
div.eleSpacing:first-child { 
  display: block; 
}
.eleSpacing label {
  display: block;
}

效果说明 #

• .eleSpacing label 这个选择器会精准选中所有带有eleSpacing类的<div>内部的<label>元素
• 给label设置display: block后，它会独占一行，后面的<select>就会自动换行到它的下方，刚好实现你想要的“label在select上方”的布局

完整可运行示例 #

<style>
.eleSpacing { 
  display: inline-block; 
  margin: 0 2em; 
}
div.eleSpacing:first-child { 
  display: block; 
}
.eleSpacing label {
  display: block;
}
</style>
<div class="eleSpacing">
  <label for="fiscalYear">Fiscal Year</label>
  <select id="fiscalYear"></select>
</div>

内容的提问来源于stack exchange，提问作者user2802437