<!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. 使用Hexo+github搭建个人博客

    目录 创建Github仓库 环境安装 安装Node.js 安装Git 检查安装 安装Hexo 连接Hexo和Github 设置Git的用户名和邮箱 配置SSH 配置Deployment 新建第一篇博客 ...

  2. 常用软件记录 ( Windows )

    带括号注明的为主力软件 现安装的: 360驱动大师 7-Zip Acrobat Reader DC Adobe Photoshop 7.0 Anaconda babun Bandizip (解压) b ...

  3. SpringMVC+Apache Shiro+JPA（hibernate）整合配置

    序: 关于标题: 说是教学,实在愧不敢当,但苦与本人文笔有限,实在找不到更合理,谦逊的词语表达,只能先这样定义了. 其实最真实的想法,只是希望这个关键词能让更多的人浏览到这篇文章,也算是对于自己写文章 ...

  4. spring依赖注入之构造函数注入，set方法注入

    <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...

  5. L1-Day8

    1.他就是我昨天见的那个人. [我的翻译]He is a man who I saw him yestorday. [标准答案]He is the man (who(m) /that) I saw y ...

  6. vueSSR全栈(项目实战 mac)

    1.准备安装及指定版本 参考安装类中的 安装部分(node,npm,webpack) nuxt 官网下载nuxt脚手架(可以自定义版本) 需要下载MongoDB  redis 以及数据库可视化工具 具 ...

  7. 清北学堂2019NOIP提高储备营DAY1

    今天是第二次培训的第一天,关于NOIP的基础算法,主要内容如下: $1.枚举 $2.搜索 $3.贪心 $1.枚举: •定义: 枚举又叫做穷举,是一种基础的算法,其思路主要是:从问题中有可能的解集中一一 ...

  8. springmvc 开发流程图

  9. Java入门细则

    (一)一个完整的Java.源程序应该包括下列部分:  package语句,该部分至多只有一句,必须放在源程序的第一句.  import语句,该部分可以有若干import语句或者没有,必须放在所有的类定 ...

  10. linux 下修改网关mac地址

    以rtl8196e为例 eth0:mac 地址设为123456789012 # flash set hw_nic0_addr  123456789012 eth1:mac 地址设为1122334455 ...