CSS3伪类:first-of-type

:first-of-type.属CSS3的伪类。作用是操作同级元素中的第一个元素。Firefox, Chrome, Opera, Safari支持，Internet Explorer8不支持。

<!--在index.html的body里加入以下内容-->

<h1>Do you like HTML</h1>
    <p>Yes,I do</p>


<div>   <!--注意我在这里加了个div-->
    <h1>What is HTML,what is CSS</h1>
        <p>Hypertext Markup Language</p>
        <p>Cascading Style Sheet</p>
</div>

/*外部CSS代码，代号①*/

p:first-of-type{   /*Yes,I do和Hypertext Markup Language变蓝*/
    color:blue;
};

/*:first-of-type的作用是操作同级元素的第一个元素。在这段代码中，css把index.html的body分成了两份。
一份是"body"，另一份是"div"。接下来CSS就会在这两部分中寻找p标签，再把各个部分的第一个p标签的内容变成蓝色。
*/

/*外部CSS代码，代号②*/
/*让我们抛弃上面那一段CSS代码（代号①），使用这一段CSS代码*/

div p:first-of-type{   /*Hypertext Markup Language变蓝*/
    color:blue;
}

/*这段代码与代号①代码的不同之处就是，我们规定了p标签的选择范围。
这一次，我不让你选择body里的第一个p标签了。我只让你选择div里的第一个p标签。
效果：Yes,I do正常显示。Hypertext Markup Language变蓝。
*/

很轻松的学习！

转载于:https://www.cnblogs.com/belearner/archive/2013/02/20/2919310.html