深入理解css3中 nth-child 和 nth-of-type 的区别
在css3中有两个新的选择器可以选择父元素下对应的子元素，一个是:nth-child 另一个是:nth-of-type。 但是它们到底有什么区别呢？
而ele:nth-child(n)是指父元素下第n个元素且这个元素为ele，若不是，则选择失败。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<style>
.demo li:nth-child(2) {
color: #ff0000;
} .demo li:nth-of-type(2) {
color: #00ff00;
}
</style>
<body>
<div>
<ul class="demo">
<p>zero</p>
<li>one</li>
<li>two</li>
</ul>
</div>
</body>
</html>
<style>
.demo :nth-child(2) {
color: #ff0000;
} .demo :nth-of-type(2) {
color: #00ff00;
}
</style>
这样又会是什么结果呢，看下html结构：
<ul class="demo">
<p>first p</p>
<li>first li</li>
<li>second li</li>
<p>second p</p>
</ul>
结果：
如上可见，在他们之前不指定标签类型，：nth-child(2) 选中依旧是第二个元素，无论它是什么标签。而 :nth-type-of(2) 选中了两个元素，分别是父级.demo中的第二个p标签和第二个li标签，由此可见，不指定标签类型时，:nth-type-of(2)会选中所有类型标签的第二个。
我们已经了解了nth-child和 nth-of-type的基本使用与区别，那么更进一步nth-of-type(n)与nth-child(n)中的n是什么呢？
nth-of-type(n)与nth-child(n)中的n可以是数字、关键词或公式。
<style>
p:nth-of-type(odd) {
background: #ff0000;
} p:nth-of-type(even) {
background: #0000ff;
}
</style>
公式：或者说是算术表达式
使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。在这里，我们指定了下标是 3 的倍数的所有 p 元素的背景色：
<style>
p:nth-of-type(3n+0) {
background: #ff0000;
}
</style>
若是 :nth-of-type(4n+2) 就是选择下标是4的倍数加上2的所有元素
深入理解css3中 nth-child 和 nth-of-type 的区别的更多相关文章
- 理解CSS3中的background－size(对响应性图片等比例缩放)
理解CSS3中的background-size(对响应性图片等比例缩放) 阅读目录 background-size的基本属性 给图片设置固定的宽度和高度的 固定宽度400px和高度200px-使用ba ...
- 深入理解css3中的线性渐变
css3中的线性渐变 线性渐变公式: background-image: linear-gradient( [ <angle> | <side-or-corner> ]?, & ...
- 深入理解css3中nth-child和 nth-of-type的区别
在css3中有两个新的选择器可以选择父元素下对应的子元素,一个是:nth-child 另一个是:nth-of-type. 但是它们到底有什么区别呢? 其实区别很简单::nth-of-type为什么要叫 ...
- 深入理解css3中的flex-grow、flex-shrink、flex-basis
https://www.cnblogs.com/ghfjj/p/6529733.html
- 简单理解java中timer的schedule和scheduleAtFixedRate方法的区别
timer的schedule和scheduleAtFixedRate方法一般情况下是没什么区别的,只在某个情况出现时会有区别--当前任务没有来得及完成下次任务又交到手上. 我们来举个例子: 暑假到了老 ...
- linux 命令中的find locate whereis which type 使用区别
find 最强大,但参数也较多,需指定查找目录,如 find / -name “filename” locate 是一个快速查找命令,有预先索引好的数据库,由于数据库是定时更新,因此,结果上可能会有迟 ...
- 初识 css3中counter属性
最近看到counter属性,好奇是做什么用的,于是去查了查. 1.简单介绍 counter是为css中插入计数器.[注明]在CSS2.1中counter()只能被使用在content属性上.关于浏览器 ...
- 【CSS3】 理解CSS3 transform中的Matrix(矩阵)
理解CSS3 transform中的Matrix(矩阵) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu ...
- 理解CSS3 transform中的Matrix(矩阵)
一.哥,我被你吓住了 打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如“拉普拉斯不等式”).这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面“Matrix(矩阵) ...
随机推荐
- 大数据入门到精通6---spark rdd reduce by key 的使用方法
1.前期数据准备(同之前的章节) val collegesRdd= sc.textFile("/user/hdfs/CollegeNavigator.csv")val header ...
- 167. Two Sum II - Input array is sorted (Array)
Given an array of integers that is already sorted in ascending order, find two numbers such that the ...
- map与forEach区别
1. forEach()返回的是undefined 不可以链式调用 return没有用 2. map()返回一个新数组 原数组不会改 3. 没办法终止或者跳过forEach()和map循环 除非抛 ...
- em,px,rem的区别
px:IE无法调整px作为单位的字体大小. 是像素,是相对长度单位,是相对于显示器屏幕分辨率而言的. em:相对于当前对象内文本的字体尺寸.1em=16px: rem:在设置字体大小时,虽然仍然是相对 ...
- AutoCAD开发5--批量修改dwg文件
Dim files, path, filename path = ThisDrawing.Utility.GetString(True, "输入dwg文件所在路径:") 'dwg文 ...
- 创建 sp
创建 sharepoint solutions---Empty project--module(跟环境中的网站页面一样) element.xml增加pages url=“site pages” 将ws ...
- MongoDB学习记录(一) - 安装、启动与建立数据库
简要说明一个基本概念:MongoDB中的三要素:数据库(database).集合(collection)和文档(document). 文档:类似于JSON对象,由字段(field)和值(value)组 ...
- RNQOJ 4 数列
把N化成二进制是关键,比如把序号10化成二进制就是1010,对于K=2来说第10个数就是2^3+2^1,对于k=3来说第10个数就是3^3+3^1;这里只需要把K替代一下就可以解决了 #include ...
- pip更换国内源
学习Python开发,据说pip是很好用的一个Python包管理工具,于是尝试使用,但源异常慢,于是切换至国内的源(清华源). 在~/.pip/pip.conf (如果没有此文件则自行新建) 内容 [ ...
- 深入浅出WPF文摘
第一部分 深入浅出XMAL 第一章 XMAL概览 第二章 从零起步认识XMAL 第三章 系统学习XMAL语法 第四章 X名称空间详解 第五章 控件与布局 GUI:图形化用户界面 逻辑树: 可视树: : ...