html5 first child,:first-child | CSS属性参考

CSS :first-child伪类选择器用于匹配父元素中的第一个子元素。

:first-child伪类选择器仅仅会匹配某个父元素中的第一个子元素，例如：

第一个段落...

第二个段落...

如果使用下面的CSS规则来添加样式，那么第一个段落的文字大小将被修改：

p:first-child {

font-size: 2em;

}

但是如果在容器中，

段落不是第一个元素，那么它不会被匹配，例如：

标题

第一个段落...

第二个段落...

如果还是使用上面的CSS规则，将没有

段落元素会被匹配。

在这种情况下，如果你想匹配第一个段落，可以使用:first-of-type伪类选择器。正如其名字所示，:first-of-type伪类选择器匹配的是某种类型元素的第一个元素。使用下面的代码将匹配H1标题之后的第一个段落元素：

p:first-of-type {

font-size: 2em;

}

示例代码

假如你有一段这样的HTML代码：

这是一个标题元素

第一个段落，但不是父元素中的第一个元素。

第二个段落。 这是段落中的一个行内元素。

• 第一个无序列表项
• 第二个无序列表项
• 第三个无序列表项

下面的代码会匹配第二个段落中的行内元素。

span:first-child {

color: red;

}

下面的代码会匹配第一个无序列表项。

li:first-child {

text-decoration: underline;

color: deepPink;

}

下面的代码通过::before和::after伪元素来为元素添加内容。

span:first-child::before {

content: "(";

color: deepPink;

}

span:first-child::after {

content: ")";

color: deepPink;

}

在线演示

下面的例子是上面代码的实际效果。

这是一个标题元素

第一个段落，但不是父元素中的第一个元素。

第二个段落。 这是段落中的一个行内元素。

第一个无序列表项

第二个无序列表项

第三个无序列表项

浏览器支持

所有的现代浏览器都支持:first-child伪类选择器，包括：Chrome, Firefox, Safari, Opera9.5+, Internet Explorer 7+ 以及 Android 和 iOS。

在IE7中，如果元素是动态加入的，则不会被更新样式。

在IE8中，如果是通过链接来动态插入的元素不会被添加样式，直到该链接失去焦点。

相关阅读