<!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. ES7的async/await

    async 表示这是一个async函数,await只能用在这个函数里面. await 表示在这里等待promise返回结果了,再继续执行. await 后面跟着的应该是一个promise对象 awai ...

  2. re模块 - 正则表达式 疏理(一)

    在网上总是很难找到令自己比较满意的,关于正则表达式的文章.所以决定自己来总结一波,并配上相应的示例. 正则表达式:定义了规则,用来字符串处理. 用途: 1.匹配 - 符合规则的字符串,则认为匹配了. ...

  3. 服务器 隐藏php版本，nginx版本号等

    隐藏php版本号: 打开php.ini配置文件  找到 expose_php 关键修改为 off 即可 重启后 web头部就不会有了 隐藏 nginx 服务器版本号: 打开nginx配置文件,在htt ...

  4. [Kubernetes]深入理解StatefulSet

    前面我写的一系列博客,如果你能够耐心看到这一篇,那你应该对一个概念就不是太陌生了:Deployment. 为什么提这个概念呢,这就要说到Deployment的一个不足了.Deployment不足以覆盖 ...

  5. CentOS配代理服务器

    背景: 某云上有台Windows主机,为了省钱(...),购买的1M带宽... 然后日常只有我用,特别卡,嫌弃得不行. 最近接触到代理,琢磨代理连接到局域网内带宽大的主机,是否上网速度会蹭蹭得涨?实践 ...

  6. 非常好用的sersync同步工具

    作者:邓聪聪 常用同步工具sync的进阶软件 服务端的配置: uid = rsync gid = rsync port = use chroot = on max connections = time ...

  7. CSScript 使用纪要

    CSScript 运行C#脚本的开源项目,在笔者简要使用过程中,遇到了一些问题,现简单记录. 1. CS0433 使用非基本类型 当遇到 CS0433错误,提示 type is defined mul ...

  8. html注意事项

    行级元素只能嵌套行级元素 块级元素可以嵌套任何元素 格力  p标签不能嵌套div a标签不能嵌套a标签

  9. Vue过滤器使用

    格式(一个过滤器):{{ 'msg' | filterA }} (多个过滤器):{{ 'msg' | filterA | filterB }} window.onload =function(){ / ...

  10. echarts 自定义配置带单位的 tooltip 提示框方法 和 圆环数据 tooltip 过长超出屏幕

    -------tip1-------- 在 tooltip  里边配置:拼接字符串: tooltip : { trigger: 'axis', formatter:function(params) { ...