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. WebServices 实现跨应用程序进行通信和跨平台进行通信

    SOA ,即Service Oriented Architecture ,中文一般理解为面向服务的架构, 既然说是一种架构的话,所以一般认为 SOA 是包含了运行环境,编程模型, 架构风格和相关方法论 ...

  2. RESTful风格编程

    参考文档:http://blog.didispace.com/springbootrestfulapi/ https://www.jianshu.com/p/91600da4df95 *)RESTfu ...

  3. SpringMVC开发中遇到的异常1：No primary or default constructor found for interface java.util.List

    Request processing failed; nested exception is java.lang.IllegalStateException: No primary or defaul ...

  4. 通用 C# DLL 注入器injector(注入dll不限)

    为了方便那些不懂或者不想用C++的同志,我把C++的dll注入器源码转换成了C#的,这是一个很简单实用的注入器,用到了CreateRemoteThread,WriteProcessMemory ,Vi ...

  5. python值的引用传递和go语言的值传递

    一:值传递 实参a 原本指向地址 1638212,代表1638212这个地址的值是3.在swap函数中,实参a将值拷贝给形参a,形参a此时也在内存中拥有地址,地址= xxxx,值为3,在所有的函数体内 ...

  6. JMeter Gui – TestElement约定（转自约会言行的博客，链接：http://blog.csdn.net/yue530tomtom/article/details/77649872?locationNum=4&fps=1）

    在编写任何JMeter组件时,必须注意某些特定的约定——如果JMeter环境中正确地运行JMeter组件,那么它将会运行.本部分描述了组件的GUI部分必须满足的约定. JMeter中的GUI代码严格地 ...

  7. 【ABAP系列】SAP 读取生产订单 记入文档的货物移动明细

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP 读取生产订单 记入文档的 ...

  8. 工具 - MSF

    #ms17- use auxiliary/scanner/smb/smb_ms17_010 - exploit use exploit/windows/smb/ms17_010_eternalblue ...

  9. 虚拟机 vs 容器

    虚拟机 虚拟机本质上是模拟,模拟物理机上的硬件 虚拟机必须安装操作系统 一个虚拟机操作系统的崩溃不会影响到其他虚拟机 容器 容器的本质是经过隔离与限制的linux进程 容器使用的是物理机的资源 容器之 ...

  10. 第一次Java学习总结

    初学Java感觉还是蛮可以的,可是做起题目来还是不能得心应手,自己不懂得太多太多,还是需要不断努力去学啊!下面我就把这些天学到的知识点总结一下: 初学Java,我把目前所学知识点总结如下: 1.jav ...