前端技术学习之选择器(七)

来源:互联网 发布:幸运大抽奖软件 编辑:程序博客网 时间:2024/06/01 07:54

:first-of-type

    :first-of-type选择器类似于:first-child选择器,不同之处是指定了元素的类型,主要用于定  位一个父元素下的某个类型的第一个子元素。

个人觉得这个:first-of-child是对:first-child的细分,锦上添花。

举个例子:给div容器中第一个p元素设置样式。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>选择器</title>

<style type="text/css">

/*p元素的父元素的第一个子元素是div而不是p元素,因此该样式不起作用*/

p:first-child{

    color: red;

}

/*此时不用first-of-type,更待何时*/

p:first-of-type{

    color: blue;

}

</style>

</head>

<body>

<div class="wrapper">

<div>第一个子元素是div元素</div>

<div>第二个div元素</div>

<p>第一个p元素</p>

<p>第二个p元素</p>

</div>

</body>

</html>

 

运行效果:


备注:last-of-type选择器和:first-of-type功能是一的,不同的是它匹配的是父元素下的某个型的最后一个子元素。

0 0
原创粉丝点击