如何仅将 CSS 应用于第一个子 div 元素？

Question

<div class = "node-master">
  <div class = "node-1">
    <div class ="node-content">
      child content 1
    </div>
  </div>
  <div class = "node-2">
    <div class ="node-content">
      child content 2
    </div>
</div>

在上面的示例中，我需要针对“child content 1”CSS 类应用不同的字体颜色。但是，需要注意的是，由于 HTML 的生成方式（dynalist.io 应用程序），我无法直接定位 node-1 。

指示“子内容 1”CSS 语法的设置来自 node-master 。

基本上，我需要做的是拥有一个使用 node-master 并将其属性应用于第一个孩子的 CSS 类 <div>

原文由 Vincent Tang 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你可以玩 :first-child CSS 选择器，例如，如果你想定位第一个 div 孩子 .node-master ：

 .node-master > div:first-child {
 color: red;
}

原文由 Troyer 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以在父级上使用 :first-child 伪选择器：

 .node-master div:first-child div.node-content {
  color: red;
}
.node-content {
  color: blue;
}

 <div class="node-master">
  <div class="node-1">
    <div class="node-content">
      child content 1
    </div>
  </div>
  <div class="node-2">
    <div class="node-content">
      child content 2
    </div>
</div>

原文由 Dekel 发布，翻译遵循 CC BY-SA 3.0 许可协议