: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变蓝。 */
很轻松的学习!