css：带有类选择器的第一个孩子将错误的元素添加到样式中？

Question

以下是HTML代码，我不明白为什么第二个<a>中的<p>标记为棕色：

.entry-content :first-child {
  color: brown
}

<article id="post-5946">
  <section class="entry-content">
    <p>
      <a href="#">HTML5 From Scratch</a>Very proud to announce my latest Pluralsight Course:
    </p>
    <p>
      <a href="#">HTML5 From Scratch</a>Very proud to announce my latest Pluralsight Course:
    </p>
  </section>
</article>

当你看这个页面时，我得到两个段落，第一个是棕色和标签一样，第二段只有棕色，不应该是这种情况，即在第二段不应该有任何颜色变化。

输出：

Answer 1

.entry-content :first-child选择.entry-content的所有后代，看看他们是否是他们父母的第一个孩子。

由于第二个<a>标记是其父和的第一个子标记，因此它是.entry-content的后代，因此它会获得样式。

您只想检查.entry-content的直接孩子，您可以这样做：

.entry-content > :first-child

假设您希望第一段和的内容为棕色，请执行以下操作：

<强>段：

.entry-content > :first-child,
.entry-content > :first-child * {
  color: brown
}

<section class="entry-content">
  <p>
    <a href="#">HTML5 From Scratch</a>Very proud to announce my latest Pluralsight Course:
  </p>
  <p>
    <a href="#">HTML5 From Scratch</a>Very proud to announce my latest Pluralsight Course:
  </p>
</section>