1.网页三大组成元素
1.<!DOCTYPE html>
用来声明文档的类型，在html文档的第一行编写。作用是告诉浏览器的解析器用什么文档标准去解析当前
文档。DOCTYPE不存在或格式不正确会导致文档以怪异模式呈现。
2.<html>
<html>是页面根元素。
3.<head>
<head>标签包含了元数据（meta），当meta标签属性设置为utf-8的时候，即可定义网页编码格式为utf-8，title标签定义文档的标题。
4.<body>
定义文档主体，即网页可见内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
2、结构层、表现层、行为层
1.结构层(HTML)
是一个超文本标记语言，负责描述网页内容的架构。
2.表现层(CSS)
负责显示结构层的样式表现。
3.行为层(JavaScript)
JavaScript是目前web上使用最广泛客户端脚本语言。
可以对结构层和表现层的内容进行修改。
3、介绍html、head、body作用
<!DOCTYPE html>
<!--
作者：offline
时间：2020-04-09
描述：html页面根元素
-->
<html>
<!--
作者：offline
时间：2020-04-09
描述：head作用：在里面编写文档的元数据、定义文档标题、引入CSS文件、引入JavaScript文件、编写CSS样式
-->
<head>
<!-- 元数据-->
<meta charset="utf-8" />
<!-- 标题-->
<title>标题</title>
<!-- 引入CSS文件-->
<link rel="stylesheet" type="text/css" href="路径"/>
<!-- 引入JavaScript文件-->
<script type="text/javascript" src="路径"></script>
<!--编写CSS样式 -->
<style type="text/css"></style>
</head>
<!--
作者：offline
时间：2020-04-09
描述：编写文档主题内容 编写JavaScript脚本引入JavaScript文件
-->
<body>
<script type="text/javascript">
//编写JavaScript语句
</script>
</body>
</html>
4、代码注释
1.css中注释
/* 注释写到这里面 */
2.html中注释
<!-- 注释写到这里面 -->
3.JavaScritp中注释
// 注释
/* 注释 */
5、Html标签
1.div
div容器标签
2.p
段落标签（用来显示文字的）,p标签中无法声明其它块级标签，会自动分离开。
3.br
换行标签，相当于word文档中的回车
4.strong
文字样式粗体显示标签
5.em
文字样式斜体显示标签
6.span
无语义标签，为给某些内容设定单独样式使用
7.ul li
无序列表
<ul>
<li>香蕉</li>
<li>菠萝</li>
<li>西瓜</li>
</ul>
8.ol li
有序列表
<ol>
<li>烤肉</li>
<li>肥肠</li>
<li>排骨</li>
</ol>
9.hx(x 1-6)
标题标签
<h1>大标题</h1>
10.hr
分割线标签
11.a
超链接标签
<!--
_blank新打开一个页面
title 鼠标放上去显示文字提示
-->
<a href="http://www.baidu.com" title="我是a标签" target="_blank">百度一下</a>
12.img
<!--
title是鼠标移上去显示文字
alt是图片加载失败显示文件
如果alt不存在title存在,那么图片加载失败,显示title文字内容
-->
<img src="1.jpg" title="我是title" alt="我是alt"/>
6、label
1.label
label标签不会向用户呈现任何效果，它的作用是为了鼠标用户改进了可用性。
当你点击label标签中的文本，便会触发对应的控件。
<!-- 第一种 使用方式 for要与控件id名相同-->
<label for="userName">姓名</label>
<input type="text" id="userName"/>
<!-- 第二种 使用方式-->
<label>姓名<input type="text" /> </label>
7、table
1.table
table标签用来定义HTML表格。
thead标签定义了一组表头
tbody标签表格内容展示
tfoot标签表格尾部展示
tr标签定义了表格的一行
th标签定义了表头显示内容，文字加粗
td标签表示表格中的单元格
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>22</td>
<td>男</td>
</tr>
<tr>
<td>翠花</td>
<td>21</td>
<td>女</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>姓名页脚</td>
<td>年龄页脚</td>
<td>性别页脚</td>
</tr>
</tfoot>
</table>
8、块级元素、行内元素、行内块级元素
1.块级元素
*独占一行
*可以设置宽度、高度、内外边距
*默认宽度为容器的100%
常见块级元素：<div> 、<hx> 、<p> 、<table>
2.行内元素
*和相邻的行内元素在同一行
*设置宽高无效、水平方向padding、maring属性可以设置，垂直方向不行
*默认宽高是自身内容
*行内元素内容容纳其他行内元素或文本
*创建行内元素：<span>、<a>、<strong>、<input>、<em>
3.行内块级元素
*可以设置宽高、内外边距
*常见的行内块级元素：<input>、<img>、<td>
9、盒子模型
1.标准盒子模型
模型成员：margin border padding width height
一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
2.怪异盒子模型
模型成员：margin border padding width height
一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）
3.box-sizing
box-sizing:content-box; 标准盒子模型
box-sizing:border-box; 怪异盒子模型
10、css选择器优先级
1.CSS 优先级
第一优先级： !important
第二优先级: 内联style样式
第三优先级: id选择器
第四优先级: class选择器
第五优先级: 标签选择器 div p等等
第六优先级: 通配符优先级
2.权重计算值分级
第一等级： 代表内联样式 权值为1000
第二等级： 代表id选择器 权值为100
第三等级： 代表class选择器 权值为10
第四等级： 代表标签选择器 权值为1
------------------------------------------
<!DOCTYPE html>
<html>
<head>
<!--编写CSS样式 -->
<style type="text/css">
html,body{
background: #fff;
}
/*通配符选择器优先级最低*/
*{
width: 100px;
height: 100px;
background: red;
}
/* 标签选择器优先级高于通配符选择器*/
div{
background: yellow;
}
/* class选择器优先级高于标签选择器，小于id选择器*/
.ldd_div{
/* !important优先级最高*/
background: fuchsia !important;
}
/* id选择器优先级高于class选择器，小于style内联样式*/
#ldd_id{
background: black;
}
</style>
</head>
<body>
<!-- style内联样式优先级高于id选择器,小于 !important-->
<div class="ldd_div" id="ldd_id" style="background: forestgreen;"></div>
</body>
</html>
11、float
1.float
块级元素显示到一行
left：元素向左浮动
right：元素向右浮动
none：默认值，不浮动
inherit：继承父类float属性
2.设置紧邻块级元素不受浮动影响
紧邻块级元素添加clear:both；
------------------------------------
<!DOCTYPE html>
<html>
<head>
<!--编写CSS样式 -->
<style type="text/css">
.father{
height: 100px;
}
.father .left{
width: 20%;
height: 100px;
background: red;
float: left;
}
.father .right{
width: 20%;
height: 100px;
background: blue;
float: left;
}
.three{
height: 100px;
background: darkblue;
clear: both;
}
</style>
</head>
<body>
<div class="father">
<div class="left"></div>
<div class="right"></div>
<div class="three"></div>
</div>
</body>
</html>
12、position
1.position
定位，元素通过 left、top、right、bottom属性进行定位设置。
static:默认值，无定位
inherit:从父元素继承position属性
1.relative
相对定位,相对于自己本身位置的定位，占用文档流
<!DOCTYPE html>
<html>
<head>
<!--编写CSS样式 -->
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.d1{
width: 100px;
height: 100px;
border: 1px solid red;
}
/* position: relative相对于自己本身位置定位 */
.d2{
width: 100px;
height: 100px;
border: 1px solid blue;
position: relative;
left: 50px;
top: 50px;
}
.d3{
height: 100px;
background: firebrick;
}
</style>
</head>
<body>
<div class="d1">
</div>
<div class="d2">
</div>
<div class="d3">
</div>
</body>
</html>
2.fixed
固定定位，相对于浏览器窗口进行定位，脱离文档流
<!DOCTYPE html>
<html>
<head>
<!--编写CSS样式 -->
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.content{
height: 1000px;
background: seagreen;
}
/* 固定定位 相对于浏览器窗口进行定位*/
.d1{
width: 100px;
height: 100px;
border: 1px solid red;
position: fixed;
bottom: 20px;
right: 20px;
}
</style>
</head>
<body>
<div class="content">
<div class="d1">
</div>
</div>
</body>
</html>
3.absolute
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。脱离文档流
<!DOCTYPE html>
<html>
<head>
<!--编写CSS样式 -->
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.d1{
width: 200px;
height: 200px;
border: 1px solid red;
margin-left: 100px;
}
/* position: absolute 绝对定位
对定位的元素的位置相对于最近的已定位祖先元素 目前最近的祖元素是.d1
但是.d1并没有使用定位，所以目前位置是对应于最初的包含块定位 */
.d2{
width: 100px;
height: 100px;
border: 1px solid blue;
position: absolute;
left: 300px;
top: 300px;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2">
</div>
</div>
</body>
</html>
3.1
<!DOCTYPE html>
<html>
<head>
<!--编写CSS样式 -->
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.d1{
width: 200px;
height: 200px;
border: 1px solid red;
margin-left: 100px;
position: relative;
}
/* position: absolute 绝对定位 .d1现在使用了定位 那么.d2现在就依.d1为参照物开始定位*/
.d2{
width: 100px;
height: 100px;
border: 1px solid blue;
position: absolute;
left: 300px;
top: 300px;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2">
</div>
</div>
</body>
</html>
13、水平垂直居中
1.水平垂直居中
text-align:center;
line-height:设置同高
存在图片和文字的情况下,图片需要添加vertical-align:middle;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<!--编写CSS样式 -->
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.d1{
width: 400px;
height: 400px;
border: 1px solid red;
text-align: center;
line-height: 400px;
float: left;
margin-right: 10px;
}
.imgMxb{
width: 50px;
height: 50px;
border: 1px solid blue;
vertical-align: middle;
}
.imgMxb_not{
width: 50px;
height: 50px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="d1">
<span style="color: red;">添加vertical-align: middle;</span>
<img class="imgMxb" src="./img/mxbLog.jpg"/>
</div>
<div class="d1">
<span style="color: red;">不添加vertical-align: middle;</span>
<img class="imgMxb_not" src="./img/mxbLog.jpg"/>
</div>
</body>
</html>
14、H5
1.H5
H5是HTML的第五版本，继承HTML原先特性。并新增了许多新的语法特征，比如语义特征、本地存储特征、
网页多媒体等。
2.H4与H5区别
1.H5新增结构语义，更能清晰表达文档的结构，H4无。
2.DOCTYPE声明不同：
H4中需要指名是HTML哪个版本，H5不需要，只需要添加<!DOCTYPE html>即可。
注意：H4的几种声明版本区别
1.HTML4 Strict:严格定义类型，该DTD不允许使用废弃元素(如font)和框架集(Framesets)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
2.HTML4 Transitional :过渡定义类型，该DTD可以使用废弃元素(如font),但不允许使用框架集(Framesets)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
3.HTML4 Frameset :框架定义类型，该DTD可以使用废弃元素(如font),和框架集。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
3.指定字符集编码不同
HTML4: < meta http-equiv="content-type" content="text/html;charset=UTF-8">
HMLT5: < meta charset="UTF-8">
15、H5结构元素
1.header:定义文档的头部内容
2.nav:定义导航链接的部分
3.main:文档主体内容
4.article:使用在相对比较独立的模块，一般用在博客、论坛、新闻报道、用户评论
5.aside:定义页面的侧边栏内容
6.section:一般用来做内容分组的，比如文章的章节
7.footer:文档的页脚内容
8.progress进度条
<progress value="22" max="100"></progress>
9.mark标记文本
<p>你好，我叫<mark>王大锤</mark></p>
16、canvas
1.canvas
canvas标签用来绘制图像，不过canvas本身并没有绘制能力，必须使用JS脚本绘制。
2.绘制一个三角形
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- canvas标签用来绘制图像，不过canvas本身并没有绘制能力，必须是使用JS脚本绘制-->
<canvas id="myCanvas" height="400" width="400" style="border: 1px solid darkblue;"></canvas>
</body>
<script type="text/jscript">
let cax = document.getElementById("myCanvas");
//目前canvas仅支持2d绘图
let context = cax.getContext("2d");
//初始一条路劲
context.beginPath();
//将画笔指定到某个坐标
context.moveTo(100, 100);
//创建一个新点，创建从上一个点到该点的线条
context.lineTo(300, 100);
//创建一个新点,创建从上一个点到该点的线条
context.lineTo(100, 200);
//创建从当前点回到起始点的路劲
context.closePath();
//绘制已定义的路劲
context.stroke();
</script>
</html>
3.绘制一个正方形
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- canvas标签用来绘制图像，不过canvas本身并没有绘制能力，必须是使用JS脚本绘制-->
<canvas id="myCanvas" height="400" width="400" style="border: 1px solid darkblue;"></canvas>
</body>
<script type="text/jscript">
let cax = document.getElementById("myCanvas");
//目前canvas仅支持2d绘图
let context = cax.getContext("2d");
//初始一条路劲
context.beginPath();
//rect(x,y,width,height)
//创建矩形 x,y坐标
context.rect(100,100,200,200);
//填充颜色
context.fillStyle = "red";
//填充当前绘图
context.fill();
//绘制已定义的路劲
context.stroke();
</script>
</html>
4.绘制一个圆形
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- canvas标签用来绘制图像，不过canvas本身并没有绘制能力，必须是使用JS脚本绘制-->
<canvas id="myCanvas" height="400" width="400" style="border: 1px solid darkblue;"></canvas>
</body>
<script type="text/jscript">
let cax = document.getElementById("myCanvas");
//目前canvas仅支持2d绘图
let context = cax.getContext("2d");
//初始一条路劲
context.beginPath();
/**
* arc(x,y,r,sAngle,eAngle,counterclockwise)
* x,y分别为圆的中心的横纵坐标
* r为圆的半径
* sAngle起始角，以弧度角。（弧的圆形的三点钟位置是0度）
* eAngle结束角，以弧度计。 （2π为一个圆）
* counterclockwise false顺时针 true逆时针
*/
context.arc(100,100,50,0,2 * Math.PI);
context.fillStyle = "yellow";
context.fill();
//绘制已定义的路劲
context.stroke();
</script>
</html>
17、video、audio
1.video
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器暂不支持video元素
</audio>
支持三种音频格式：mp4、ogg、webm
video元素支持多个<source>元素，<source>元素可以链接不用的视频文件，浏览器会依次识别，第一个
可用的格式。
属性：
autoplay:自动播放，视频就绪后马上播放。注意：谷歌浏览器视频初始必须处于静音模式，方可自动播放
controls:显示播放插件(暂停、音量等)
width:视频播放器宽度
height:视频播放器高度
loop:循环播放
muted:视频静音
poste:视频封面图
preload:
auto:指示一旦页面加载，则开始加载音频/视频。
metadata:页面加载后仅加载音频/视频的元数据。
none:页面加载后不会加载音频/视频，需要手动点击
src:视频路径
2.audio 音频
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器暂不支持audio元素
</audio>
音频格式:mp3、ogg、wav
audio标签可选属性：controls̵、loop̵、muted̵、preload̵、src（使用方式同video元素一样）
18、H5表单属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- autocomplete 可添加到form或input中，提示用户之前输入的内容-->
<form action="" autocomplete="on">
<!-- autofocus 页面加载完成自动获取焦点 不能共存 只能一个input框自动获取焦点-->
<input type="text" autofocus />
<!-- multiple只能设置到input上，规定元素可选择多个值 使用于file上传多个文件，email多个邮箱用","隔开-->
<input type="email" multiple />
<input type="file" multiple />
<!-- pattern对input内容正则校验-->
<!-- placeholder文字提示-->
<input type="text" pattern="[A-Za-z]{3}" placeholder="正则校验"/>
<!-- required 必须填写不能为空-->
<input type="text" required/>
<input type="submit" value="提交" />
</form>
</body>
</html>
19、web本地存储
HTML5Web存储可以在本地存储用户数据，web存储相对cookie更加的安全与快速，
它的数据不会保存到服务器上，它可以存储大量数据，而不影响网站的性能。
1.localStorage
用于长久保存网站数据，保存的数据没有过期时间，需要手动删除。
存储数据大小约5M.
不同浏览器不能共享数据，同一个浏览器同源下不同窗口共享数据。
数据保存在硬盘上，关闭浏览器不会清空数据，下次打开数据依然存在。
常用API:
保存数据:localStorage.setItem(key,value);
读取数据:localStorage.getItem(key);
删除单个数据:localStorage.removeItem(key);
删除所有数据:localStorage.clear();
根据索引获取数据:localStorage.key(index);
2.sessionStorage
用于保存会话数据，关闭浏览器窗口，数据清空。
存储数据大小约5M.
数据存储在当前页面内存中，关闭或重新打开页面数据将会清空。
API同localStorage相同。
3.cookie、localStorage、sessionStorage区别？
相同点：数据都是保存在浏览器端，且同源共享。
不同点：
1.cookie数据会在浏览器请求服务时进行传递，每次http请求都会携带cookie.而localStorage、
sessionStorage仅将数据保存在浏览器端，不参与服务器通信。
2.cookie存储数据一般不超过4k,而localStorage是5M,sessionStorage是5M。
3.数据周期不同，cookie数据在设置的过期时间内一直有效，sessionStroage会话数据，关闭浏览器或窗
口时数据清空，localStorage数据保存在硬盘中，即使关闭浏览器或者窗口数据依然存在，需要手动清空。
20、CSS3新增样式选择器
1.~
dom1~dom2 匹配dom1元素之后每一个dom2元素，注意：dom1与dom2必须具有相同的父元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/** dom1~dom2 配置dom1元素之后每一个dom2元素，注意：dom1与dom2必须具有相同的父
元素*/
h1~p {
color: red;
}
div~p {
color: blue;
}
</style>
</head>
<body>
<div>
<h1>~匹配器</h1>
<p>哈喽</p>
<p>你好</p>
<span>我会不会</span>
<p>什么？</p>
</div>
<hr />
<div>
<div>我是div</div>
<p>另外一个</p>
<p>打球</p>
<p>驭帅11</p>
</div>
</body>
</html>
2.CSS3样式匹配
dom[attribute^=value]指定value值开头的元素
dom[attribute*=value]包含指定value值的元素
dom[attribute$=value]指定value值结尾的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/**
* dom[attribute^=value]指定value值开头的元素
* */
div[class^="ldd"] {
color: red;
}
/**
* dom[attribute*=value]包含指定value值的元素
* */
div[class*="MM"] {
color: darkorange;
}
/**
* dom[attribute$=value]指定value值结尾的元素
* */
div[class$="bba"] {
color: green;
}
</style>
</head>
<body>
<div class="lddDiv">指定value值开头的元素</div>
<div class="testMMdom">包含指定value值的元素</div>
<div class="testbba">指定value值结尾的元素</div>
</body>
</html>
3.CSS3新增样式选择器
dom:first-of-type
匹配所有父级元素下第一个dom元素
dom:last-of-type
匹配所有父级元素下最后一个dom元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/**
* 匹配所有父级元素下第一个p元素
*/
p:first-of-type{
color: red;
}
/**
* 匹配所有父级元素下最后一个p元素
*/
p:last-of-type{
color: green;
}
</style>
</head>
<body>
<div>
<p>我是第一个</p>
<p>我是中间的</p>
<p>我是最后的</p>
</div>
</body>
</html>
4.css3新增样式选择器
dom:only-of-type
匹配dom元素是其父元素下唯一的一个dom元素，
但是其父元素下可以有多个其它的dom元素，
只匹配父元素下dom元素存在唯一的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/**
* 匹配p元素是其父元素下唯一的一个p元素
(父元素可以有多个其它dom元素，但只匹配存在一个p元素的)，
与p:only-child不同，p:only-child 只匹配其父元素下，
元素个数是1的p元素。
*/
p:only-of-type{
color: red;;
}
</style>
</head>
<body>
<div>
<!-- p元素是其父元素唯一的一个 匹配-->
<p>我是独生子</p>
</div>
<div>
<!-- 虽然父元素下有多个dom元素，但是p元素只有唯一一个 所以p元素匹配-->
<p>我是姐姐</p>
<h1>我是弟弟</h1>
</div>
</body>
</html>
5.css3新增样式选择器
dom:only-child
匹配父元素下dom元素个数为1的p元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/**
* 匹配父元素下dom元素个数为1的p元素
*/
p:only-child{
color: red;;
}
</style>
</head>
<body>
<div>
<p>我是独生子</p>
</div>
<div>
<p>我是姐姐</p>
<h1>我是弟弟</h1>
</div>
</body>
</html>
6.css3新增样式选择器
dom:nth-child(n)
匹配父元素下第n个子元素，如果第n个子元素不是dom元素，则不生效。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 匹配父元素下第4个子元素,第四个子元素不是p元素则不生效*/
p:nth-child(4) {
color: red;
}
</style>
</head>
<body>
<div>
<span>我是span1</span>
<p>我是p1</p>
<span>我是span2</span>
<p>我是p2</p>
<p>我是p3</p>
</div>
</body>
</html>
7.css3新增选择器
dom:nth-last-child(n)
匹配父元素下倒数第n个子元素，如果倒数第n个子元素不是dom元素，则不生效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 匹配父元素下倒数第4个子元素,如果倒数第四个子元素不是p元素则不生效*/
p:nth-last-child(4){
color: red;
}
</style>
</head>
<body>
<div>
<span>我是span1</span>
<p>我是p1</p>
<span>我是span2</span>
<p>我是p2</p>
<p>我是p3</p>
</div>
</body>
</html>
8.css3新增样式
dom:nth-last-of-type(n)
匹配父元素下同类型第n个dom元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
匹配父元素下同类型倒数第3个p元素
*/
p:nth-last-of-type(3){
color: red;
}
</style>
</head>
<body>
<div>
<p>我是p1</p><!--同类型 倒数3 -->
<span>span1</span>
<p>我是p2</p><!--同类型 倒数2 -->
<span>span2</span>
<p>我是p3</p><!--同类型 倒数1 -->
</div>
</body>
</html>
1459
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
