nth-of-type和nth-child的区别

---恢复内容开始---

nth-of-type这一类的选择器是针对同类型的子元素进行计算；

nth-child这一类的先择器是连同父元素中的所有子元素一起计算；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*h2:nth-child(even){*//*background: blue;*//*}*//*h2:nth-child(odd){*//*background: aquamarine;*//*}*/h2:nth-of-type(even){background: blue;}h2:nth-of-type(odd){background: yellowgreen;}</style>
</head>
<body>
<div><h2> 标题1</h2><p>内容 ......三万字</p><h2>标题2</h2><p>内容 ......三万字</p><h2>标题3</h2><p>内容 ......三万字</p><h2>标题4</h2><p>内容 ......三万字</p><h2>标题5</h2><p>内容 ......三万字</p><h2>标题6</h2><p>内容 ......三万字</p>
</div>
</body>
</html>

标题1

内容 ......三万字

标题2

内容 ......三万字

标题3

内容 ......三万字

标题4

内容 ......三万字

标题5

内容 ......三万字

标题6

内容 ......三万字

还有相似的有选择器nth-last-child和nth-last-of-type;

转载于:https://www.cnblogs.com/flxy-1028/p/6053670.html

nth-of-type和nth-child的区别相关推荐

HTML button 和 input type=“button”的区别 / input type=submit 和button的区别
HTML <button> 和 input type="button"的区别: 1. <button>标签里可以放文本图片等内容,与<input> ...
Python type函数和isinstance函数区别 - Python零基础入门教程
目录一.Python type 函数简介二.Python isinstance 函数简介三.Python type 函数和 isinstance 函数区别四.猜你喜欢零基础 Python 学 ...
android type c 串口,type c和安卓接口区别正式解决了USB永远插不准的
导语:说到接口,大家应该都不陌生,有人问什么叫type-c接口,另外,还有人想问type c和安卓接口区别,这到底怎么回事呢?事实上typec数据线是什么手机用的呢,下面是小编为大家整理的type c ...
Java中的Type接口和Class类区别和联系
Java中的Type接口和Class类有什么区别 Type是Class的父接口. Type 是 Java 编程语言中所有类型的公共高级接口.它们包括原始类型.参数化类型.数组类型.类型变量和基本类型. ...
type接口和class的区别（类型和类）
Class public final class Class < T > implements java . io . Serializable, GenericDeclaration, ...
TypeScript 中 Type 和 Interface 有什么区别？
type 和 interface type 是类型别名,给一些类型的组合起别名,这样能够更方便地在各个地方使用. 假设我们的业务中,id 可以为字符串或数字,那么我们可以定义这么一个名为 ID 的 ...
input type=submit 和button的区别及表单提交
在一个页面上画一个按钮,有四种办法: 1 <input type="button" /> 这就是一个按钮.如果你不写javascript 的话,按下去什么也不会发生. ...
USB Type A/B/C的区别和基本知识
USB 1.0 USB规格第一次是于1995年,由Intel.IBM.Compaq.Microsoft.NEC.Digital.North Telecom等七家公司组成的USBIF(USB Imple ...
关于USB Type A/B/C的区别和基本知识
USB 1.0 USB规格第一次是于1995年,由Intel.IBM.Compaq.Microsoft.NEC.Digital.North Telecom等七家公司组成的USBIF(USB Imple ...
type struct 和struct的区别
1.用Typedef 定义类型除了可以直接使用C提供的标准类型名(如int char float等)和自己声明的结构体等类型外,还可以用typedef声明新的类型名来代替已有的类型名. 习惯上常把t ...

nth-of-type和nth-child的区别

标题1

标题2

标题3

标题4

标题5

标题6

nth-of-type和nth-child的区别相关推荐

最新文章

热门文章