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. Java网络编程与NIO详解11：Tomcat中的Connector源码分析（NIO）

    本文转载 https://www.javadoop.com 本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 https://github.c ...

  2. fengmiantu3

  3. ceph-pve英语

    adapted accordingly并相应地调整 silosn. 筒仓:粮仓:贮仓(silo的复数) saturatevt. 浸透,使湿透:使饱和,使充满While one HDD might no ...

  4. Week3 - 397. Integer Replacement

    Week3 - 397. Integer Replacement 397.Integer Replacement - Medium Given a positive integer n and you ...

  5. oracle alter index rebuild offline与online

    oracle index build online与offline测试环境为oracle 11.2.0.4 --sql test SQL> conn test/test )); begin .. ...

  6. linux上搭建nginx+ftp，实现文件的上传与访问

    ftp服务器搭建 1.新建用户ftpuser并指定主目录为/home/ftpuser (注意:这个目录是后面存储和读取文件的目录) <!--创建用户并指定主目录--> useradd -d ...

  7. C++笔记（6）——关于OJ的单点测试和多点测试

    单点测试 PAT使用的就是单点测试(LeetCode应该也是单点测试).单点测试中系统会判断每组数据的输出结果是否正确,正确则通过测试并获得这则测试的分值.题目的总得分等于通过的数据的分值之和. 代码 ...

  8. C++边双缩点，Redundant Paths 分离的路径

    一道比较简单的 关于边双的题,个人感觉难度不大. 求出整个图的边双,根据边双的定义我们可以延伸出 边双的任两个点都有至少两种路径来互相抵达(因为其不存在割边) .不妨将每个边双缩成一个点,样例中的图便 ...

  9. Flask使用原生sql语句

    安装pip install flask-sqlalchemy 创建数据库对象 # 设置数据库连接地址app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://r ...

  10. Java第四周编程总结

    第四周编程总结 1.写一个名为Rectangle的类表示矩形.其属性包括宽width.高height和颜色color,width和height都是double型的,而color则是String类型的. ...