深入理解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(矩阵) ...
随机推荐
- 论：开发者信仰之“天下IT是一家“(Java .NET篇)
比尔盖茨公认的IT界领军人物,打造了辉煌一时的PC时代. 2008年,史蒂夫鲍尔默接替了盖茨的工作,成为微软公司的总裁. 2013年他与微软做了最后的道别. 2013年以后,我才真正看到了微软的变化. ...
- ASP.NET Aries 入门开发教程6：列表数据表格的格式化处理及行内编辑
前言: 为了赶进度,周末也写文了! 前几篇讲完查询框和工具栏,这节讲表格数据相关的操作. 先看一下列表: 接下来我们有很多事情可以做. 1:格式化 - 键值的翻译 对于“启用”列,已经配置了格式化 # ...
- ASP.NET Core的路由[5]：内联路由约束的检验
当某个请求能够被成功路由的前提是它满足某个Route对象设置的路由规则,具体来说,当前请求的URL不仅需要满足路由模板体现的路径模式,请求还需要满足Route对象的所有约束.路由系统采用IRouteC ...
- bzoj3095--数学题
题目大意:给定一个长度为n的整数序列x[i],确定一个二元组(b, k)使得S=Σ(k*i+b- x[i])^2(i∈[0,n-1])最小 看Claris大神的题解就行了.实际上就是用2次二次函数的性 ...
- error C4430：missing type specifier 解决错误
错误 3 error C4430: missing type specifier - int assumed. Note: C++ does not support default-int ...
- [转载]SQL Server 2008 R2安装时选择的是windows身份验证，未选择混合身份验证的解决办法
安装过程中,SQL Server 数据库引擎设置为 Windows 身份验证模式或 SQL Server 和 Windows 身份验证模式.本文介绍如何在安装后更改安全模式. 如果在安装过程中选择&q ...
- BAT“搅局”B2B市场，CIO们准备好了吗？
"CIO必须灵活构建其所在企业的IT系统,深入业务,以应对日新月异的数字化业务环境." BAT军团"搅局"B2B市场,CIO们准备好了吗? 庞大的企业级市场 ...
- Atitit 软件工程概览attilax总结
Atitit 软件工程概览attilax总结 1.1. .2 软件工程的发展 进一步地,结合人类发展史和计算机世界演化史来考察软件工程的发展史. 表2 软件工程过程模型 表2将软件工程的主要过程模型做 ...
- RMS：Microsoft Office检测到您的信息权限管理配置有问题。有关详细信息，请与管理员联系。（转）
原文:https://zhidao.baidu.com/question/435088233.html RMS有两种方式: 1.使用微软的服务器,这个是连接到微软的服务器上面做权限控制,在今年5月份之 ...
- jetBrain系列软件
请尽量支持正版软件!https://www.jetbrains.com/ 本文仅供参考 以下提供一种方法可以无限期体验JetBrain2016系列软件. 1.下载JetbrainsCrack-2.5. ...