CSS3选择器:nth-of-type
碰到了个选择器,:nth-of-type
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
p:nth-of-type(odd)//奇数
{
background:#cff;
}
p:nth-of-type(even)//偶数
{
background:#fcc;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<p>第一个段落。</p>
<div>这是一个div。</div>
<div>这是一个div。</div>
<p>第二个段落。</p>
<p>第三个段落。</p>
<span>这是一个span。</span>
<p>第四个段落。</p>
<p>第五个段落。</p>
</body>
</html>
奇偶另一种方式
p:nth-of-type(2n+1);
p:nth-of-type(2n);
与nth-child的区别
:nth-child(2):选择器匹配属于其父元素的第2个子元素,不论元素的类型。p:nth-child(2)前面加了P,则需要同时满足两个条件,父元素的第二个元素,且是p元素。
p:nth-of-type(2):选择器匹配属于父元素的特定类型(p)的第2个子元素的每个元素。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.aa p:nth-child(2)//父元素aa下第二个元素,且为p标签
{
background:#cff;
}
.aa div:nth-child(2)//父元素aa下第二个元素,且为div标签--没有颜色
{
background:#ffc;
}
.aa p:nth-of-type(2)//父元素aa下第二个p标签
{
background:#f00;
}
.aa div:nth-of-type(2)//父元素aa下第二个div标签
{
background:#faa;
}
</style>
</head>
<body>
<div class="aa">
<h1>这是标题</h1>
<p>第一个段落。</p>
<div>这是一个div。</div>
<div>这是一个div。</div>
<p>第二个段落。</p>
<p>第三个段落。</p>
<span>这是一个span。</span>
<p>第四个段落。</p>
<p>第五个段落。</p>
</div>
</body>
</html>
CSS3选择器:nth-of-type的更多相关文章
- CSS3选择器介绍
1.css3属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- CSS3 选择器——伪类选择器
前面花了两节内容分别在<CSS3选择器——基本选择器>和<CSS3选择器——属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择 ...
- CSS3选择器(三)之伪类选择器
伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总 结一下CSS中常用的伪类选择器的使用方法,最后把重心放 ...
- 总结30个CSS3选择器
或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 ;; ...
- 总结30个CSS3选择器(转载)
或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...
- CSS3 选择器——属性选择器
上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...
- css3 选择器(三)
接css3选择器(一) 接css3 选择器(二) 这篇和前两篇内容相关性不大,主要是涉及到一些css3的状态选择器,所以标题从一开始. 一.[:enabled]选择器 一看这个属性就知道是专为表单元素 ...
- CSS3 选择器——基本选择器
CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运用的灵活到位,我想对很多朋友还是一定的难度,特别是CSS3中的:nth选择器.那么从现在开始我们先丢开他们版本的区别, ...
- CSS3选择器的研究,案例
在上一篇CSS3选择器的研究中列出了几乎所有的CSS3选择器,和伪类选择器,当是并没有做案例的研究,本想在那篇文章里面写,但想想如果把案例都写在那篇文章里面,对于查找来说就不是很方便,所有另开一篇来讲 ...
- css3选择器(一)
直接开始正文. 一.css3同级元素通用选择器[update20161228] 选择器:E~F 匹配任何在E元素之后的同级F元素 Note:E~F选择器选中的是E元素后面同级元素中的全部F元素. 例: ...
随机推荐
- SqlServer--代码创建约束
约束-保证数据完整性先用设计器创建约束,再用代码创建约束.数据库约束是为了保证数据的完整性(正确性)而实现的一套机制非空约束 (选择复选框)not null主键约束(PK)primary key co ...
- Linux SendMail服务启动慢总结
在 CentOS release 6.6 上启动sendmail服务时发现服务启动过程非常慢,基本上要耗费3分多钟.有点纳闷:什么原因导致sendmail启动这么慢?搜索了这方面的一些资料,结合自己的 ...
- mysql慢查询日志分析工具 mysqlsla(转)
mysql数据库的慢查询日志是非常重要的一项调优辅助日志,但是mysql默认记录的日志格式阅读时不够友好,这是由mysql日志记录规则所决定的,捕获一条就记录一条,虽说记录的信息足够详尽,但如果将浏览 ...
- js中操作数组的一些方法
增 push 在数组的末尾添加一个或多个元素,并返回新的长度. array.push(1,2,3.........) unshift 在数组的开头添加一个或多个元素,并返回新的长度. arra ...
- Linux笔记:使用Vim编辑器
Vi编辑器是Unix系统上早先的编辑器,在GNU项目将Vi编辑器移植到开源世界时,他们决定对其作一些改进. 于它不再是以前Unix中的那个原始的Vi编辑器了,开发人员也就将它重命名为Vi improv ...
- 【转】用C写一个简单病毒
[摘要]在分析病毒机理的基础上,用C语言写了一个小病毒作为实例,用TURBOC2.0实现. [Abstract] This paper introduce the charateristic of t ...
- ES5 对象的扩展(Object.preventExtensions)、密封(Object.seal)和冻结(Object.freeze)
前面提到 ES5 对象属性描述符,这篇看看对象的扩展.密封和冻结. 扩展对象 Object.preventExtensions Object.isExtensible 密封对象 Object.seal ...
- addEventListener 的另类写法
addEventListener 参数如下 addEventListener(type, listener[, useCapture]); type,事件名称 listener,事件处理器 useCa ...
- 《javascript》高级程序设计——类型转换错误
容易发生类型转换错误的另一个地方,就是流控制语句.像if之类的语句在确定下一步操作之前,会自动把任何值转换成布尔值.尤其是if语句,如果使用不当,最容易出错.来看下面的例子. function con ...
- 《InsideUE4》UObject(一)开篇
UE生UObject,UObject生万物 引言 在上个GamePlay专题,谈到UE创建游戏世界的时候(GamePlay架构(一)Actor和Component),简单的介绍了一下UObject的功 ...