<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style>

		.uls > li{

			width: 100px;

			line-height: 25px;

		}

		.uls >li:nth-child(1){

			background: pink;

		}

		.uls >li:nth-child(2n){

			/*2n的倍数变色，可以写3n，4n等*/

			background: red;

		}

		.uls >li:nth-child(odd){

			/*奇数的倍数变色*/

			color:blue;

		}

		.uls >li:nth-child(even){

			/*偶数字体变大*/

			font-size: 18px;

			color: #fff;

		}

		.uls >li:nth-child(4n+1){

			/*4n+1的背景色*/

			background: #000;

			opacity: .8;

			filter: alpha(opacity=80)

		}

		.cs2 >li{

			width: 100px;

		}

		.cs2 >li:nth-of-type(2n){

			color: pink;

		}

/* 区别 */

		.box{

				width: 50%;margin: auto;

			}

			ul,li{list-style: none;}

			.box div,p{

				border: 1px solid #008000;height: 30px;line-height:30px;text-indent: 10px;

			}

			.box div{

				margin: 10px auto;

			}

	/*：nth-child*/

	.box :nth-child(2n){

		background: red;

		color: #fff;

	}

	/*nth-of-type 在不指定类型时，nth-child(n)选中的是父元素下的第n个子元素；nth-of-type(n)选中的是父元素下的不同类型标签的第n个*/

	.box :nth-of-type(2){

		background: pink;

	}

	</style>

</head>

<body>

	css3样式

<div>

	<ul class="uls">

		<li>黄色</li>

		<li>黄色</li>

		<li>黑色</li>

		<li>蓝色</li>

		<li>白色</li>

		<li>紫色</li>

		<li>灰色</li>

	</ul>

	<ul class="cs2">

		<li>111</li>

		<li>22</li>

		<li>333</li>

		<li>444</li>

	</ul>

</div>

<!-- nth-child与nth-of-type的区别 -->

<h4> nth-child与nth-of-type的区别</h4>

<div class="box">

	<p>ppp</p>

	<p>ppp</p>

	<div>div</div>

	<div>div</div>

	<article>article</article>

	<div>div</div>

	<div>div</div>

	<div>div</div>

	<ul>

		<li>ul中的li标签</li>

		<li>ul中的li2标签</li>

	</ul>

	<p><span>p标签里面的span标签</span></p>

	<span>span</span>

</div>

</body>

<script src="js/jquery-1.11.0.min.js"></script>

<script>

</script>

</html>

　　

该文章参考

:nth-child() 与 :nth-of-type(n)的区别的更多相关文章

  1. button与input[type=”button”]的区别

    button与input[type="button"]的区别 特别感谢 @守护晴天 ,指出了博客中不细致不严谨的地方,也让我学到了更多,更多是觉得抱歉,由于自己的不细致可能误导了一 ...

  2. C#中的值类型（value type）与引用类型（reference type）的区别

    ylbtech- .NET-Basic:C#中的值类型与引用类型的区别 C#中的值类型(value type)与引用类型(reference type)的区别 1.A,相关概念返回顶部     C#中 ...

  3. 关于<button> 没写 type='button' 导致点击时提交以及<button>和<input type="button">的区别

    这是我的第一篇博客,如果写的不好,请见谅 这是一个关于button按钮一个小问题 最近刚开学跟着老师一起写代码,在模仿JAVA web程序设计(慕课版) P61页第三章 Ajax处理XML的代码中发现 ...

  4. <button>和<input type="button"> 的区别

    <button>标签 定义和用法 <button> 标签定义一个按钮. 在 button 元素内部,您可以放置内容,比如文本或图像.这是该元素与使用 input 元素创建的按钮 ...

  5. <button>与<input type="button"> 的区别

    <button> button按钮点击会刷新整个页面 <input type="button">  不会刷新整个页面 本文为本人用来记录自己做的一些东西,如 ...

  6. <button>与<input type="button">的区别

    一.定义和用法 <button> 标签定义的是一个按钮. 在 button 元素内部,可以放置文本或图像.这是<button>与使用 input 元素创建的按钮的不同之处. 二 ...

  7. type() 和 isinstance()区别

    a=111 # type() 返回数据类型 In: type(a)  Out: int In: print(type(a)) Out: <class 'int'> # isinstance ...

  8. find、which、whereis、locate和type之间的区别

    1.find find是最常用和最强大的查找命令.它能做到实时查找,精确查找,但速度慢. find的使用格式如下: #find [指定目录] [指定条件] [指定动作] 指定目录:是指所要搜索的目录和 ...

  9. jquery中选择器input:hidden和input[type=hidden]的区别

    关于选择器:hidden的说明,在jquery说明文档中是这样说的:匹配所有不可见元素,或者type为hidden的元素.而[type=hidden]是查找所有type属性等于hidden的元素.两者 ...

  10. 解析<button>和<input type="button"> 的区别

    一.定义和用法 <button> 标签定义的是一个按钮. 在 button 元素内部,可以放置文本或图像.这是<button>与使用 input 元素创建的按钮的不同之处. 二 ...

随机推荐

  1. react 监听页面滚动

    html: // 如果使用typescript, 定义dom类型 private dom: HTMLDivElement | null // ReactJS中,对Div监听只需要绑定 onScroll ...

  2. Studio 5000编程：一种累计时间的编程方法

    前言:在很多项目中,需要累计设备的运行.停机.故障时间,当然实现该功能的编程方法也是多种多样,各有千秋,不过有的方法累计误差会越来越大,比如:在连续任务里用定时器来累计时间,就存在一定的误差.本文分享 ...

  3. mysql并发控制之数据库锁

    1.mysql和redis的区别 mysql是一种关系型数据库,数据会最终存储在磁盘上.而redis是一种非关系型的nosql数据库,以key-value的形式存储数据,将数据存储在内存.从性能上来说 ...

  4. ESLint学习小记

    一.关于配置文件,优先级从上到下: eslintrc.js .eslintrc.yaml .eslintrc.yml .eslintrc.json .eslintrc package.json 在官方 ...

  5. 7zip，命令行解压报错：7-Zip cannot find the code that works with archives.

    简单的命令: 7z x zipfile.7z 7-Zip 9.20 Copyright (c) 1999-2010 Igor Pavlov 2010-11-18 Error: 7-Zip cannot ...

  6. Debug Dump file

    dump file is a snapshot of the processs memeory. to debug it, we need use its corresponding executiv ...

  7. onscroll 元素滚动事件

    阻止事件冒泡 event.stopPropagation(); children():查找合集里面的第一级子元素.(仅儿子辈,这里可以理解为就是父亲-儿子的关) children只查找第一级的子节点 ...

  8. 最优的路线(floyd最小环）

    问题描述 学校里面有N个景点.两个景点之间可能直接有道路相连,用Dist[I,J]表示它的长度:否则它们之间没有直接的道路相连.这里所说的道路是没有规定方向的,也就是说,如果从I到J有直接的道路,那么 ...

  9. java获取application.properties和application.yml配置文件信息

    public static void main(String[] args) { String result=getProjectConfig("max-file-size"); ...

  10. 控制可编辑的Div 在添加图片，或者@某人的时候 光标移动到最后

    this.$refs.editor.innerHTML += '<span style="color:yellowgreen;">@ 野猪佩奇</span> ...