为何<div>内的<label>标签无法更改文字颜色？

你的问题核心在于.window元素的opacity: 0.5属性——这个属性会让整个元素及其所有子元素都处于半透明状态，哪怕给子元素单独设置opacity: 1也无效，因为子元素的透明度是基于父元素计算的。你的label文字颜色是黑色，.window的背景也是黑色，半透明后两者视觉上完全重叠，就造成了颜色没生效的假象。

解决方法很简单：移除.window的opacity属性，改用rgba格式设置背景色，这样只会让背景半透明，不会影响子元素的显示效果：

body {
  margin: 0px;
}

label {
  font-family: arial;
  font-size: 18pt;
  color: #000000; /* 现在正常生效 */
}

.window {
  /* 用rgba实现背景半透明，不影响子元素 */
  background-color: rgba(0, 0, 0, 0.5);
  width: 300px;
  height: 100px;
  border-radius: 10px;
  overflow: hidden;
  padding: 5px;
}

.window-title {
  width: 100%;
  text-align: center;
}

.window-area {
  object-fit: cover;
  background-color: #FFFFFF;
}

HTML代码无需修改：

<div class="window">
  <div class="window-title"><label>Title</label></div>
  <div class="window-area">Content</div>
</div>

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