<!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. 浅入深出Vue：工具准备之PostMan安装配置及Mock服务配置

    浅入深出Vue之工具准备(二):PostMan安装配置 由于家中有事,文章没顾得上.在此说声抱歉,这是工具准备的最后一章. 接下来就是开始环境搭建了~尽情期待 工欲善其事必先利其器,让我们先做好准备工 ...

  2. 了解vue里的Runtime Only和Runtime+Compiler

    转自:了解vue里的Runtime Only和Runtime+Compiler 扩展文章:Vue 2.0如何仅使用Runtime-only Build构建项目? 可以看到有两种版本: Runtime ...

  3. windows上安装zip版mongodb

    版本3.4:现将mongodb解压,再选择一个位置创建data文件夹并在其下创建db文件夹和log文件夹 然后编写mongod.cfg文件,注意这里用的yaml格式,对空格很敏感,并且要注意mongo ...

  4. vscode 前端插件推荐

    参考链接:https://segmentfault.com/a/1190000011779959?utm_source=tag-newest#articleHeader48

  5. 2018-2019-2 网络对抗技术 20165325 Exp2 后门原理与实践

    2018-2019-2 网络对抗技术 20165325 Exp2 后门原理与实践 实验内容(概要): (1)使用netcat获取主机Shell,cron启动 首先两个电脑(虚拟机)都得有netcat, ...

  6. 基于XML搭建SpringMVC项目

    *如果你需要将应用部署到不支持Servlet3.0容器中 或者 你只是对web.xml情有独钟,那我们只能按照传统的方式,通过web.xml来配置SpringMVC. *搭建SpringMVC需要在w ...

  7. ngx_string()错误分析

    #define ngx_string(str) { sizeof(str) - 1, (u_char) str } typedef struct { uint len; u_char* data; } ...

  8. juypter4.4.0 自动补全

    python -m pip install jupyter_contrib_nbextensions jupyter contrib nbextension install --user --skip ...

  9. TLS详解

    TLS加密通信, 开始使用协商的秘钥进行加密通信 1.服务器也可以要求验证客户端,即实现双向的验证, 2.会话缓存握手过程,为了建立握手的速度,减少协议带来的性能方面的降低和资源方面的消耗,TLS协议 ...

  10. 错误： Cause: java.lang.IllegalArgumentException: Mapped Statements collection does not contain value for studentDao.insert

    详细错误信息: org.apache.ibatis.exceptions.PersistenceException: ### Error updating database. Cause: java. ...