<!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. 【4】学习C++之内存管理

    单个内存申请及释放: int *p = new int; if(p == NULL) { //内存分配失败 //异常处理 } delete p; p = NULL; 内存块的申请及释放: ]; if( ...

  2. java 中类的方法

    object类,即所有类的父类, getClass() 返回对象执行时的Class实例, getClass().getName();// 返回类的名字 toString();// equals();/ ...

  3. Python核心编程（网络编程）

    1.python socket模块内置方法 2.tcp服务器伪代码 3.tcp客户端伪代码 4.socket模块属性 5.一个简单的tcp客户端和服务端 服务端代码: # encoding:utf-8 ...

  4. centos7 nginx配置ssl证书实现https访问同时http访问

    1,首先将你申请到的nginx 分类下的ssl证书上传到nginx的config下(可以新建一个目录叫ssl.) 2.修改nginx的config配置 server {listen 80;(监听80端 ...

  5. EASY-X

    ----------------------- Page 1----------------------- 一 创建新项目 VC 写程序要有项目的概念,一个项目可以有多个 .cpp 文件,多个项目构 ...

  6. 从输入URL到浏览器显示页面发生了什么

    1.输入网址 当你开始输入网址比如www.cnblogs.com时游览器就可以在书签或者历史记录里面去搜索相关的网址推荐给你. 2.游览器查找域名的IP地址 ① 请求发起后,游览器首先会解析这个域名, ...

  7. DBA_TABLES ALL_TABLES USER_TABLES

    DBA_TABLES >= ALL_TABLES >= USER_TABLES DBA_TABLES意为DBA拥有的或可以访问的所有的关系表. ALL_TABLES意为某一用户拥有的或可以 ...

  8. P5301 [GXOI/GZOI2019]宝牌一大堆

    题目地址:P5301 [GXOI/GZOI2019]宝牌一大堆 这里是官方题解(by lydrainbowcat) 部分分 直接搜索可以得到暴力分,因为所有和牌方案一共只有一千万左右,稍微优化一下数据 ...

  9. jquery +ajax 上传加预览

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  10. Groovy Closure简介

    什么是闭包(Closure) 在Groovy中,闭包是一段匿名的代码段,它可以有参数,返回值,并且能够赋值给一个变量.闭包中使用的变量可以是在闭包外部定义的,也可以是在闭包内部定义的.