html设置type选择器,css :first-of-type选择器实例讲解

css :first-of-type介绍

css :first-of-type选择器用于匹配父元素的第一个特定子元素。

语法：

:first-of-type {

style properties

}

如：p:first-of-type用于匹配父元素里的第一个p元素。

css :first-of-type实例

设置其父级的第一个p元素的背景色

p:first-of-type

{

background:#ff0000;

}

This is a heading

The first paragraph.

The second paragraph.

The third paragraph.

The fourth paragraph.

/* http://www.manongjc.com/article/1306.html */

再看一个实例：

p:first-of-type

{

background-color:yellow;

}

码农教程

java教程

php教程

css教程

mysql教程

html教程

sql教程

js教程

运行结果如下：

p:first-of-type需要注意两点：

第一，是在整个HTML文档中匹配

第二，p:first-of-type选取的是父元素里的第一个子元素p标签，并不要求父元素的第一个子元素必须是p标签。

上面实例中，body的第一个p标签子元素为"

码农教程

"，所以该元素会被选中。

同理“

mysql教程

”和"

sql教程

"作为div(class为div1和class为div2)元素的第一个p标签，所以也会被选中.