CSS3 first-of-type选择器

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

示例演示：

通过“:first-of-type”选择器，定位div容器中的第一个p元素（p不一定是容器中的第一个子元素），并设置其背景色为橙色。

HTML代码：

<div class="wrapper">

  <div>我是一个块元素，我是.wrapper的第一个子元素</div>

  <p>我是一个段落元素，我是不是.wrapper的第一个子元素，但是他的第一个段落元素</p>

  <p>我是一个段落元素</p>

  <div>我是一个块元素</div>

</div>

CSS代码：

.wrapper {

  width: 500px;

  margin: 20px auto;

  padding: 10px;

  border: 1px solid #ccc;

  color: #fff;

}

.wrapper > div {

  background: green;

}

.wrapper > p {

  background: blue;

}

/*我要改变第一个段落的背景为橙色*/

.wrapper > p:first-of-type {

  background: orange;

}

演示结果：

区别：

:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。

:first-of-type 匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。

也可以这么说：

:first-child 相当与 小明的爸爸的大孩子（全部孩子中的第一个）

:first-of-type 相当与小明的爸爸的大男孩（男孩中的第一个，也就是年纪最大的一个）

代码比较如下：

:first-child:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>:first-of-type</title>

    <style type="text/css">

        .wrapper {

            border: 1px solid slateblue;

            padding: 10px;

            width: 500px;

            margin: 20px auto;

        }

        .wrapper > p,

        .wrapper > div {

            margin: 10px ;

            background:deepskyblue;

            color: #fff;

            padding: 5px;

        }

        .wrapper>p:first-child {

            background: blue;

        }

    </style>

</head>

<body>

<div class="wrapper">

    <p>我是第一个段落</p>

    <p>我是第二个段落</p>

    <div>我是第一个Div元素</div>

    <div>我是第二个Div元素</div>

    <p>我是第三个段落</p>

    <p>我是第四个段落</p>

    <div>我是第三个Div元素</div>

    <div>我是第四个Div元素</div>

</div>

</body>

</html>

效果：

:first-of-type

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>:first-of-type</title>

    <style type="text/css">

        .wrapper {

            border: 1px solid slateblue;

            padding: 10px;

            width: 500px;

            margin: 20px auto;

        }

        .wrapper > p,

        .wrapper > div {

            margin: 10px ;

            background:deepskyblue;

            color: #fff;

            padding: 5px;

        }

        .wrapper > div:first-of-type {

            background: orange;

        }

        .wrapper>p:first-of-type{

            background: salmon;

        }

    </style>

</head>

<body>

<div class="wrapper">

    <p>我是第一个段落</p>

    <p>我是第二个段落</p>

    <div>我是第一个Div元素</div>

    <div>我是第二个Div元素</div>

    <p>我是第三个段落</p>

    <p>我是第四个段落</p>

    <div>我是第三个Div元素</div>

    <div>我是第四个Div元素</div>

</div>

</body>

</html>

效果：

参考资料：http://www.imooc.com/code/809

css3 first-of-type选择器以及css3选择器中:first-child与:first-of-type的区别的更多相关文章

  1. CSS3 选择器——伪类选择器

    前面花了两节内容分别在<CSS3选择器——基本选择器>和<CSS3选择器——属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择 ...

  2. CSS选择器，CSS3选择器

    CSS选择器 ------->CSS选择器优先级 1>通配符选择器(CSS2) 选择所有元素,所有浏览器都支持. *{ margin:0; padding:o; } 2>元素选择器( ...

  3. CSS3知识点整理（二）----CSS3选择器

    总结各种CSS3选择器的介绍及具体语法 (一)属性选择器 在CSS2中引入了一些属性选择器,而CSS3在CSS2的基础上对属性选择器进行了扩展,新增了3个属性选择器,使得属性选择器有了通配符的概念,这 ...

  4. CSS3选择器02—CSS3部分选择器

    该部分主要为CSS3新增的选择器 接上一篇 CSS(CSS3)选择器(1) 一.通用兄弟选择器: 24:E ~ F,匹配任何E元素之后的同级F元素. div ~ p{ background-color ...

  5. CSS选择器及CSS3新增选择器

    转自:http://www.cnblogs.com/libingql/p/4375354.html 1. CSS1定义的选择器 选择器 类型 说明 E 类型选择器 选择指定类型的元素 E#id ID选 ...

  6. [CSS3]移动Web开发系列之CSS3增强型选择器

    css3是移动Web开发的主要技术之中的一个.当前.CSS3技术最适合在移动Web开发中使用的特性有增强的选择器.阴影.强大的背景设置 .圆角边框 接下来我们主要解说增强型的选择器.主要分两种,属性选 ...

  7. CSS属性、伪类选择器，CSS3选择器

    CSS1时IE6是部分支持,伟大的IE6!CSS2时IE6部分支持,伟大的IE6依旧是部分支持!CCS3盛行CSS4也已经提上日程的现在,IE6完全不支持.IE6你该走了,我们会永远记住你的功绩的!I ...

  8. CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)

    使用CSS3 选择器——笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...

  9. CSS3 nth-of-type(n)选择器 last-of-type选择器 nth-last-of-type(n)选择器 CSS3 only-child选择器 only-of-type选择器

    CSS3 nth-of-type(n)选择器 “:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似,不同的是它只计算父元素中指定的某种类型的子元素.当某个元素中的子元 ...

随机推荐

  1. [CSP-S模拟测试]:小P的2048（模拟）

    题目描述 最近,小$P$迷上了一款叫做$2048$的游戏.这块游戏在一个$n\times n$的棋盘中进行,棋盘的每个格子中可能有一个形如$2^k(k\in N^*)$的数,也可能是空的.游戏规则介绍 ...

  2. 深入理解BFC和IFC

    1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...

  3. Spring 使用RedisTemplate操作Redis

    首先添加依赖: <!-- https://mvnrepository.com/artifact/redis.clients/jedis --> <dependency> < ...

  4. C#中使用Join与GroupJoin将两个集合进行关联与分组

    转自:https://www.cnblogs.com/cncc/p/7985843.html 对于Join的用法说明如下: 语法: public static IEnumerable<TResu ...

  5. Booting the Linux/ppc kernel without Open Firmware

    The DT block format 这一章定义了传递给内核的FDT(flattened device tree)的格式.关于它包含的内容以及内核需要的属性将在后续章节描述. 注:DT block应 ...

  6. Powershell指令集_2

    目录 目录 获取证书 Get-Childitem 调用REST API Invoke-RestMethod 选择对象属性 Select-Object 导入模块 Invoke-Expression 路径 ...

  7. python学习笔记（数据类型）

    python数据类型: int 类型 float 小数类型 string 字符串 布尔类型 a = True b = False 1.列表,也称数组或list或array.它的表达方式通过下标或索引或 ...

  8. Whatever happens tomorrow, we've had today

    bathe: v. 用水清洗 resemblance:n. 相似.相像 cavity:n. 洞,孔,腔 stubborn: adj. 顽强的,固执的 stillness: n. 静止,沉静 tenth ...

  9. windows和linux中查看端口占用情况并kill掉对应进程

    好几次在不同的情况下遇到 需要查看端口信息 并且kill掉对应进程的情况 相关的参数总是记不全 在这里记录下 以后查看方便 windows中查看正在使用端口的信息netstat -ano|findst ...

  10. 13 (H5*) JS第三天 数组、函数

    目录 1:数组的定义和创建方式 2:数组的总结 3:for循环遍历数组 4:数组的案例 5:冒泡排序 6:函数的定义 7:函数的参数 8:函数的返回值 复习 <script> /* * * ...