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;
}

演示结果:

nth-of-type(n)选择器

:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似,不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时,使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样,可以是具体的整数,也可以是表达式,还可以是关键词

示例演示

通过“:nth-of-type(2n)”选择器,将容器“div.wrapper”中偶数段数的背景设置为橙色。

HTML代码:

<div class="wrapper">
<div>我是一个Div元素</div>
<p>我是一个段落元素</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
</div>

CSS代码:

.wrapper > p:nth-of-type(2n){
background: orange;
}

演示结果:

【CSS3】---first-of-type选择器+nth-of-type(n)选择器的更多相关文章

  1. CSS元素选择器 element selector(type selector)

    http://www.w3school.com.cn/css/css_selector_type.asp 元素选择器 最常见的 CSS 选择器是元素选择器.换句话说,文档的元素就是最基本的选择器. 如 ...

  2. 《CSS3实战》读书笔记 第三章:选择器:样式实现的标记

    第三章:选择器:样式实现的标记 选择器的魔力在于,让你完全实现对网页样式的掌控.不同的选择器可以用在不同的情况下使用.总之把握的原则是:规范的编码,根据合理地使用选择器,比去背选择器的定义有价值的多. ...

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

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

  4. 统计分析中Type I Error与Type II Error的区别

    统计分析中Type I Error与Type II Error的区别 在统计分析中,经常提到Type I Error和Type II Error.他们的基本概念是什么?有什么区别? 下面的表格显示 b ...

  5. Informatica 错误:Cannot convert from SQL type 93 to C type 4

    经验和积累蛮重要!向大神学习! ---------------------------------------------------------------------- Mapping: 在sou ...

  6. orcle自定义类型type/create or replace type

    一.type / create or repalce type 区别联系 相同: 可用关键字create type 或者直接用type定义自定义类型, 区别: create type 变量 as ta ...

  7. org.springframework.beans.TypeMismatchException: Failed to convert property value of type 'null' to required type 'double' for property 'band'; nested exception is org.springframework.core.convert.Con

    本文为博主原创,未经允许不得转载: 先将异常粘贴出来: 20:37:26,909 ERROR [com.suning.fucdn.controller.ProductDataStaticsContro ...

  8. Unable to cast object of type 'System.Int32' to type 'System.Array'.

    x 入职了新公司.最近比较忙...一看博客...更新频率明显少了...罪过罪过... 新公司用ASP.NET MVC 遇上一个错误: Unable to cast object of type 'Sy ...

  9. Host does not support domain type kvm for virtualization type 'hvm' arch 'x86_64'

    kvm创建虚拟机报错: qemu-img create -f qcow2 /tmp/centos.qcow2 10G virt-install --virt-type kvm --name cento ...

  10. Found more than one concrete type for given DbContext Type (xxx.xxxx.xxx) define MultiTenancySideAttribute with Tenant

    错误提示: Found more than one concrete type for given DbContext Type (Abp.Zero.EntityFramework.AbpZeroCo ...

随机推荐

  1. Python学习入门基础教程(learning Python)--5.2 Python读文件基础

    上节简单的说明了一下Pyhon下的文件读写基本流程,从本节开始,我们做几个小例子来具体展示一下Python下的文件操作,本节主要是详细讲述Python的文件读操作. 下面举一个例子,例子的功能是读取当 ...

  2. 上门洗车App 竟然是块大肥肉!

    http://www.leiphone.com/k-xiche-app-idea.html 打车App.租车App.防违规App我们见得多,但洗车App你一定没听过,之前在一次创业路演上碰到一个做上门 ...

  3. ReactNative学习实践--动画初探之加载动画

    学习和实践react已经有一段时间了,在经历了从最初的彷徨到解决痛点时的兴奋,再到不断实践后遭遇问题时的苦闷,确实被这一种新的思维方式和开发模式所折服,react不是万能的,在很多场景下滥用反而会适得 ...

  4. PrettyProgressBar

    https://github.com/liuguangqiang/PrettyProgressBar

  5. linux上nagios安装完整版

    监控server端的安装部署一.apache的安装下载httpd-2.2.15.tar.gz gunzip httpd-2.2.15.tar.gztar xvf httpd-2.2.15.tarcd ...

  6. swift 3.0基本数据语法

    swift 3.0 字符串的介绍 OC和Swift中字符串的区别 在OC中字符串类型时NSString,在Swift中字符串类型是String OC中字符串@"",Swift中字符 ...

  7. oralce 函数 FOR windows 跟踪神器

    https://github.com/dennis714 http://www.yurichev.com

  8. FlatUI博皮制作

    Bootstrap3出来了,抛开内部框架结构和css命名的变化,bs3最大的改变莫过于扁平化. 扁平化UI中的典范,除了Metro,就是Flat了.目前本人FlatUI中毒中,于是开始慢慢的开始将博皮 ...

  9. 判断null

    var tmp = this.pullDown.getValue();   if(!tmp && typeof(tmp)!="undefined" &&am ...

  10. IP, TCP, and HTTP--reference

    IP, TCP, and HTTP Issue #10 Syncing Data, March 2014 By Daniel Eggert When an app communicates with ...