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. [CERC2016]:凸轮廓线Convex Contour（模拟+数学）

    题目描述 一些几何图形整齐地在一个网格图上从左往右排成一列.它们占据了连续的一段横行,每个位置恰好一个几何图形.每个图形是以下的三种之一:$1.$一个恰好充满单个格子的正方形.$2.$一个内切于单个格 ...

  2. .NET COM+级别的事务Transaction实现

    参考: https://docs.microsoft.com/zh-cn/dotnet/api/system.enterpriseservices.contextutil?view=netframew ...

  3. 史上最详细的XGBoost实战

    史上最详细的XGBoost实战 0. 环境介绍 Python 版 本: 3.6.2 操作系统 : Windows 集成开发环境: PyCharm 1. 安装Python环境 安装Python 首先,我 ...

  4. 与Pig相似，Hive是一种MapReduce上的抽象工具（除非使用新的执行引擎）

    Hive隐藏了后面的MapReduce任务 EXPLAIN sql: 分析查询计划.

  5. (转)SQLite部署-无法加载 DLL“SQLite.Interop.dll”: 找不到指定的模块

    本文转载自:http://www.cnblogs.com/muzhiye/p/4284070.html 近期刚使用SQLite,主要引用的是System.Data.SQLite.dll这个dll,在部 ...

  6. 用vuex实现购物车功能

    效果图 展示目录结构 product组件(纯静态代码) cart组件(纯静态代码) info组件(纯静态代码) 完成以上的三个组件,现在要开始调用这些组件,在App.vue中调用 如果你的姿势正确的话 ...

  7. json模块：字符串与字典之间的转换--loads,dumps,load,dump

    一.json转化成字典: product.json文件:将该文件内容转换成python中字典,方法如下: 方法一:使用.loads(),先读后转换 import  json   #导入json, 注: ...

  8. [Web 前端] 007 css 常见的七种选择器

    1. 标签选择器 影响范围大 建议尽量应用在层级选择器中 举例 <!-- body 体中的 div --> <div>box...</div> /* style 中 ...

  9. 在无界面centos7上部署MYSQL5.7数据库

    1. 利用xshell连接好服务后,输入 wget http://dev.mysql.com/get/mysql57-community-release-el7-8.noarch.rpm 下载软件安装 ...

  10. stl应用

    http://codeforces.com/problemset/problem/1154/E E. Two Teams time limit per test 2 seconds memory li ...