如何仅将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>

在上面的示例中，我需要定位＆＃34;子内容1＆＃34; CSS类应用不同的字体颜色。但是，需要注意的是，由于HTML的生成方式（dynalist.io应用程序），我无法直接定位node-1。

设定口述＆＃34;儿童内容1＆＃34; CSS语法来自node-master。

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

Answer 1

您可以使用:first-child CSS选择器，例如，如果您想定位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>

Answer 3

这是用于定位没有类

的元素的css

 .node-master > div:nth-child(1){background-color:red;}
 .node-master > div:nth-child(2){background-color:blue;}
 ...
 .node-master > div:nth-child(n){background-color:red;}

希望这可能会有所帮助 感谢。

Answer 4

您需要让每个节点内容都是唯一的，以便css出现

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

然后只需设置颜色属性即可。

.node-content1 {
  color: #1e00ef
}

.node-content2 {
  color: #f44336
}

在这里：https://jsfiddle.net/fvw3xhv8/