html - Div 元素中的 CSS First-child 奇怪行为

Question

这是我的代码:

.tagBoxContent p:first-child {
  color: blue;
}

.tagBoxContent p:last-child {
  color: red;
}

<div class="tagBoxContent">
  <a class="tagHeadline">with <span>'chat'</span> tagged articles</a>
  <p>Lorem ipsum dolor sit amet,</p>
  <p>Integer ma</p>
</div>

为什么第一个子元素不触发 p 标签但最后一个子元素触发？以及如何在没有第一个 child 或有工作的第一个 child 的情况下调用第一个 p 标签？我进行了很多研究，但没有发现任何具有相同问题的副本。

Answer 1

您正在使用 :first-child 而它不是第一个 child 。相反，请使用 :first-of-type。

.tagBoxContent p:first-of-type {
  color: blue;
}

.tagBoxContent p:last-child {
  color: red;
}

<div class="tagBoxContent">
  <a class="tagHeadline">with <span>'chat'</span> tagged articles</a>
  <p>Lorem ipsum dolor sit amet,</p>
  <p>Integer ma</p>
</div>