css选中父元素下的第一个子元素(:first-child)

前言

最近在项目中用到 :first-child 很容易的就想到了，嗯嗯。这不就是选择第一个元素吗？

好像很好用，平时使用中也没有遇到什么问题，理所当然的就以为它只会选中父元素下的第一个元素，对孙元素和曾孙元素没有影响。事实证明，我的理所当然是错的。

E:first-child的第一个误区（只会选中我规定的区域中的一个，不会遍历其下有多少个孙或曾孙元素）

<!DOCTYPE html><html><head><style>body p:first-child{background-color:yellow;}</style></head><body><p>这个段落是其父元素（body）的首个子元素。</p><h1>欢迎访问我的主页</h1><p>这个段落不是其父元素的首个子元素。</p><div><p>这个段落是其父元素（div）的首个子元素。</p><p>这个段落不是其父元素的首个子元素。</p></div><p><b>注释：</b>对于 IE8 及更早版本的浏览器中的 :first-child，必须声明 <!DOCTYPE>。</p></body></html>

上面的代码真的是只会有一个p标签生效吗？

这是后就已经犯了我们常见的第一个误区，认为body p:first-child选中的就是第一个元素。

其实，只要在我们选中的body这一块中，如果这个p在其父元素中属于第一个，那它就被选中。