【CSS3】---first-of-type选择器+nth-of-type(n)选择器
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)选择器的更多相关文章
- CSS元素选择器 element selector(type selector)
http://www.w3school.com.cn/css/css_selector_type.asp 元素选择器 最常见的 CSS 选择器是元素选择器.换句话说,文档的元素就是最基本的选择器. 如 ...
- 《CSS3实战》读书笔记 第三章:选择器:样式实现的标记
第三章:选择器:样式实现的标记 选择器的魔力在于,让你完全实现对网页样式的掌控.不同的选择器可以用在不同的情况下使用.总之把握的原则是:规范的编码,根据合理地使用选择器,比去背选择器的定义有价值的多. ...
- CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)
使用CSS3 选择器——笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...
- 统计分析中Type I Error与Type II Error的区别
统计分析中Type I Error与Type II Error的区别 在统计分析中,经常提到Type I Error和Type II Error.他们的基本概念是什么?有什么区别? 下面的表格显示 b ...
- Informatica 错误:Cannot convert from SQL type 93 to C type 4
经验和积累蛮重要!向大神学习! ---------------------------------------------------------------------- Mapping: 在sou ...
- orcle自定义类型type/create or replace type
一.type / create or repalce type 区别联系 相同: 可用关键字create type 或者直接用type定义自定义类型, 区别: create type 变量 as ta ...
- 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 ...
- Unable to cast object of type 'System.Int32' to type 'System.Array'.
x 入职了新公司.最近比较忙...一看博客...更新频率明显少了...罪过罪过... 新公司用ASP.NET MVC 遇上一个错误: Unable to cast object of type 'Sy ...
- 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 ...
- 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 ...
随机推荐
- STM32 + RT Thread OS 学习笔记[三]
RTGUI 据说RTGUI是多线程的,因此与RT-Thread OS的耦合度较高,有可能要访问RT-Thread的线程控制块.如果要移植到其它OS,估计难度较大.目前还处于Alpha状态,最终将会包含 ...
- uva140 - Bandwidth
Bandwidth Given a graph (V,E) where V is a set of nodes and E is a set of arcs in VxV, and an orderi ...
- AIM Tech Round (Div. 2) B. Making a String 贪心
B. Making a String 题目连接: http://codeforces.com/contest/624/problem/B Description You are given an al ...
- Codeforces Educational Codeforces Round 5 A. Comparing Two Long Integers 高精度比大小,模拟
A. Comparing Two Long Integers 题目连接: http://www.codeforces.com/contest/616/problem/A Description You ...
- iOS开发——使用技术OC篇&简单九宫格锁屏功能的实现与封装
简单九宫格锁屏功能的实现与封装 首先来看看最后的实现界面. 在这开始看下面的内容之前希望你能先大概思考活着回顾一下如果 你会怎么做,只要知道大概的思路就可以. 由于iphone5指纹解锁的实现是的这个 ...
- 【OC语法快览】四、基础内存管理
Basic Memory Management 基础内存管理 If you're w ...
- 用SecureCRT来上传和下载数据
借助securtCRT,使用linux命令sz可以很方便的将服务器上的文件下载到本地,使用rz命令则是把本地文件上传到服务器. 其中,对于sz和rz的理解与记忆我用了如下的方法(很多时候容易搞混): ...
- Maven项目报错:The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path
刚刚新建完Maven项目,一般都会报这个错误,原因是没有默认添加需要的javax.servelet的jar包,所以打开pom.xml文件添加如下dependency即可: <dependency ...
- Java SimpleDateFormat 函数
一.SimpleDateFormat函数例子: SimpleDateFormat format=new SimpleDateFormat("MM-dd HH:mm:ss E"); ...
- 倒数计数器-CountDownLatch
最近写一个多线程程序,老是MAIN方法执行完了子线程还没执行完(不知道以前怎么玩儿的),得不到最终结果,于是找到了CountDownLatch CountDownLatch是一个同步辅助类,java. ...