CSS :first-child pseudo-class 简单的例子不起作用

Question

据我所知，下面这个简单的例子应该可以工作，但实际上没有。我显然遗漏了一些东西，但我一辈子都弄不明白。

第一个.field div应该有红色文字，但根本没有...

运行 Chrome 浏览器在 Mac.

p .field:first-child {
  color: red;
}

<p>
  <div class="field">first - should be red</div>
  <div class="field">second</div>
</p>

Answer 1

尝试

.field:first-child {
  color: red;
}

Answer 2

HTML无效。

p 元素不能包含 div 元素。结果如下：

<p></p>
  <div class="field">first - should be red</div>
  <div class="field">second</div>
<p></p>

如您所见，浏览器自动关闭 p 标签，这解释了为什么您的选择器不匹配任何内容。

如果 HTML 确实有效，那么您的选择器就会起作用。例如，如果您将 div 元素替换为 span 元素，则以下内容将起作用：

p .field:first-child {
  color: #f00;
}

CSS :first-child pseudo-class simple example not working