对于结构性伪类选择器 :first-child 的浏览器支持还是蛮好的,IE6 及以下不支持外,其他都支持;

用法及定义

:first-child 选择器用于选取属于其父元素的第一个子元素:

<style type="text/css">
div :first-child{ color: #f00; }
// 选择所有 div 里面的第一个子元素

div a:first-child { color: #ff0; }
// 选择所有 div 里面的第一个子元素并且这个子元素必须是 a 
// 如果第一个子元素不是 a 则不会选择任何元素
// <div><span>1</span><a>2</a><a>3</a></div> 像这样是不会选择任何元素的
</style>

IE7 中的Bug

在 IE7 中,虽然支持 :first-child,但是存在一个 Bug,如果父元素的第一个子节点是注释的话,那么在 IE7 也 :first-child 就是指的这个注释节点(nodeType为8),而其他浏览器只会选择元素节点(nodeType为1):

<style type="text/css">
.my-div a {
    display: inline-block;
    padding: 10px;
    margin: 10px;
    background-color: #f1f1f1;
}    
.my-div :first-child {
    background-color: #f00;
}
</style>

<div class='my-div' id='myDiv'>
    <a href='javascript:;'>1</a>
    <a href='javascript:;'>2</a>
</div>

以上的样式是设置 .my-div 里面的 a 的背景颜色为 灰色,而 .my-div 里面的第一个子元素的背景色为 红色,这在 IE7 是没问题的,如果我们把 HTML 结构稍加改动:

<div class='my-div' id='myDiv'>
    <!-- 我是注释 -->
    <a href='javascript:;'>1</a>
    <a href='javascript:;'>2</a>
</div>

现在 .my-div 里面插入了一段 HTML 注释,这个时候在 IE7 中 :first-child 匹配的就是注释,而其他浏览器匹配的是第一个 a 元素;

以前都没发现有这个问题,昨天项目上一次偶然的机会才发现,以后要谨记啦!

参考资料