[CSS] first-child选择器的一点理解

在W3school上的解释是这样的：

first-child选择器：选择属于其父元素的首个子元素的每个<p>元素，并为其设置样式：

p:first-child
{
background-color: yellow;
}

这很容易产生一种误解，认为p:first-child是选中p元素的第一个子元素。

举例说明：

<div>
    <p>标题1的第一段</p>
    <p>标题1的第二段</p>
</div>

<div>
    <h2>标题2</h2>
    <p>标题2的第一段</p>
</div>

第一种写法：

div:first-child {color:red;}

按照错误理解（p:first-child是选中p元素的第一个子元素），那应该选择div元素的第一个p元素，但它把div里的所有p元素都匹配了，说明这种理解是错误的。

正确理解是：只要div元素是它的父级的第一个子元素，就选中。第一个div元素是它父级body元素的第一个子元素，所以被选中；第二个div元素并不是第一个子元素，所以不被选中。

第二种写法：

p:first-child {color:red;}

这里匹配了第一个div里的第一个p，但没有匹配第二个div里的p。

正确的理解应该是：只要p元素是它的父级的第一个子元素，就选中。

在第二个div中，p元素并不是它的父级div的第一个子元素，所以不能被选中。

备注：本人刚入门学习，如有理解的不对的地方，欢迎大家批评指正，感谢。