CSS：first-child伪类简单示例不起作用

Question

据我所知，下面这个简单的例子应该可行，但事实并非如此。我显然错过了一些东西，但我不能为我的生活弄清楚。

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

在Mac上运行Chrome浏览器。

http://codepen.io/anon/pen/obbmjd

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

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

Answer 1

HTML无效。

p元素不能包含div元素。这导致以下结果：

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

正如您所看到的，浏览器会自动关闭p标记，这解释了您的选择器无法匹配的原因。

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

Updated Example

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

Answer 2

尝试

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