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

Question

这个问题在这里已有答案：

• How to apply CSS to only immediate children of a certain class 3回答

<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 app），我无法直接定位node-1。

指示“子内容1”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/