[CSS参考手册](http://css.doyoe.com/)»[选择符列表](#)»[伪类选择符](#)» 相关内容： [**其它伪类选择符参考**选择其它项](#) - [E:link](#) - [E:visited](#) - [E:hover](#) - [E:active](#) - [E:focus](#) - [E:lang()](#) - [E:not()](#) - [E:root](#) - [E:first-child](#) - [E:last-child](#) - [E:only-child](#) - [E:nth-child(n)](#) - [E:nth-last-child(n)](#) - [E:first-of-type](#) - [E:last-of-type](#) - [E:only-of-type](#) - [E:nth-of-type(n)](#) - [E:nth-last-of-type(n)](#) - [E:empty](#) - [E:checked](#) - [E:enabled](#) - [E:disabled](#) - [E:target](#) - [@page:first](#) - [@page:left](#) - [@page:right](#) # 结构性伪类选择符 E:first-child - **版本：CSS2** ### 语法： **E:first-child**{ sRules } ### 说明： **匹配父元素的第一个子元素E。** - 要使该属性生效，E对象必须是某个对象的子元素。 - **这里可能存在误解：** **示例代码：** ~~~ <ul> <li>列表项一</li> <li>列表项二</li> <li>列表项三</li> <li>列表项四</li> </ul> ~~~ 在上述代码中，如果我们要设置第一个li的样式，那么代码应该写成`li:first-child{sRules}`，而不是`ul:first-child{sRules}`。其它相关的伪类都如此。 ### 兼容性： - 浅绿 = 支持 - 红色 = 不支持 - 墨绿 = 部分支持 - 橙色 = 实验性质 <table class="gdataform"><thead><tr><th><a href="#browser" title="查看本文档测试时所用浏览器版本">支持版本</a>\类型</th> <th><span class="browser-ie">IE</span></th> <th><span class="browser-firefox">Firefox</span></th> <th><span class="browser-safari">Safari</span></th> <th><span class="browser-chrome">Chrome</span></th> <th><span class="browser-opera">Opera</span></th> </tr></thead><tbody><tr><th>较早版本</th> <td class="unsupport">6.0</td> <td rowspan="2" class="support">4.0</td> <td rowspan="2" class="support">5.1</td> <td rowspan="2" class="support">13.0</td> <td rowspan="2" class="support">11.50</td> </tr><tr><th>较新版本</th> <td class="support">7.0</td> </tr></tbody></table> ### 示例： # 注意是li:first-child，而不是ul:first-child - 结构性伪类选择符 E:first-child - 结构性伪类选择符 E:first-child - 结构性伪类选择符 E:first-child - 结构性伪类选择符 E:first-child Copyright © 2006-2012 [Doyoe](http://www.doyoe.com/). All Rights Reserved