CSS 選擇器，用於不帶 class 的第一個元素

Question

我是 css 的新手，我有一些自動生成的片段如下，

<div id="display">
  <div>
      <div>
        <p>red</p>
      </div>
      <div>
        <p>not red</p>
      </div>
    </div>
</div>

我已通過 javascript 片段將自動生成的元素附加到顯示 div（第一個 div）中。 我想select 只使用 CSS 的第一段。

我試過跟隨 CSS 也試過nth-child(1) ，

p:first-child {
    color:red;
}

但它選擇了這兩個值。

Answer 1

兩個<p>元素都是它們各自父 DIV 的第一個子元素。 您希望<p>是第一個孩子 DIV 的孩子。

 div:first-child > p { color: red; }

 <div id="display"> <div> <div> <p>red</p> </div> <div> <p>not red</p> </div> </div> </div>

Answer 2

您也可以使用first-of-type來實現該目標

 div:first-of-type > p { color: red; }

 <div id="display"> <div> <div> <p>red</p> </div> <div> <p>not red</p> </div> </div> </div>

Answer 3

#display > div > div:first-child > p{ 顏色：紅色 }