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

Question

js小提琴链接#&togetherjs = GPrgjuTmSu

<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>

在上面的例子中.我需要定位"子内容1"CSS类以应用不同的字体颜色.但是,需要注意的是,node-1由于HTML的生成方式(dynalist.io应用程序),我无法直接定位.

指定"子内容1"CSS语法的设置来自node-master.

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

Answer 1

您可以使用:first-childCSS选择器,例如,如果您想要定位第一div个子项.node-master:

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

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>