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. 箭头函数（Arrow Functions）

    ES5语法: var getPrice = function() { return 4.55; }; console.log(getPrice()); ES6 中,箭头函数就是函数的一种简写形式,使用 ...

  2. python的filter,reduce,map

    1.filter filter(func,iter) 只能处理一个参数(iter),仅仅将满足func方法的数值过滤出来 如: a = [,,,,] list(filter(lambda x:x> ...

  3. pc显示，手机隐藏

    <div class="none"><img src="https://www.foresthouse.cn/bigpic.jpg"/> ...

  4. 在vue中如何引jquer

    最近学习vue,习惯性的通过<script>标签引入jquery,写完后报错才想起来,这种方式在vue是不适用的. 1:因为已经安装了vue脚手架,所以需要在webpack中全局引入jqu ...

  5. python -加密（MD5）

    import hashlib def md5_passwd(str,salt ='aaaaa') str = str + salt m = hashlib.md5()#构造一个MD5对象 m.upda ...

  6. excel实现筛选去重操作

    前情提要: 做图表时,希望更新数据后能自动化更新图表,需要各种公式之间相互配合.此时的需求是,将A表中的不同用户登录的地点做一个图表统计. 1.创建透视表 以用户id和地点当做行标签制作透视表,透视表 ...

  7. DataGridView数值列和日期列

    本文转自:http://www.cnblogs.com/conexpress/p/5923324.html 在使用DataGridView编辑数据的时候,编辑的单元格一般会显示为文本框,逻辑值和图片会 ...

  8. vue 组件传参

    路由配好了 再传个参呗 注:组件信息流转的时候只能单向1 > 父子传参传参:通过属性prop:传递数据 a.父组件传参给子组件 子组件: <ul> <li v-for=&quo ...

  9. glibc升级，解决glib版本过低的问题

    Debian wheezy下的glibc版本为2.13,安装几个软件都运行不了,报以下类似错误:xxxx: /lib/i386-linux-gnu/i686/cmov/libc.so.6: versi ...

  10. 触摸板PCB制作-TM12

    1.布局: 使 PSoC 与Sensor之间的距离保持最小化是一个不错的做法. 通常将 PSoC 与其他组件一起贴装到底层,而将 CapSense Sensor置于顶层上.  Sensor和栅格地层位 ...