html - CSS :first-child with class selector picking up wrong elements to style?

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 的所有后代看看他们是否是 parent 的第一个 child 。

自第二个<a>标签是其父标签的第一个子标签并且它是.entry-content 的后代, 它获得了风格。

你只想检查.entry-content的直系 child ，你可以这样做:

.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>