2024年Web前端最新HTML与CSS的进阶版——HTML5与CSS3，不可多得的干货

前端面试题汇总

JavaScript

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

性能

linux

前端资料汇总

在之前也有学习表单元素但我们相对学的比较基础，如下图：

现在我们新增了一些新的表单标签

具有更多的功能并且让它具有限制性，提高表单填写内容的准确性。

下图是新增的表单属性

二、对CSS3的学习

=========================================================================

1.学习目标

---

CSS3同样也是在CSS中引入新特性，在CSS原先基础上引入新特性。在这一块我们需要明确掌握：说出CSS的新增特性有哪些。

2.新增选择器与属性

---

属性选择器

代码如下（示例）：style里的样式

代码如下（示例）：body里的样式

小图标1

小图标2

小图标3

小图标4

我是安其拉

我是哥斯拉

那我是谁

如图总结上方代码：

对于选择器中会有权重问题 当div.icon1与section[class$=data] 权重相同时，网页会依据HTML中的就近原则来实行。

结构伪类选择器

nth-child(n)

nth-child(n)中n可以是数字，关键字和公式：

• n如果是数字，就可以选择第n个子元素，里面数字从1开始 n也可以是关键字：even 偶数，odd 奇数

• 表示父盒子里面的第一个first-child{ };

表示父盒子里面的最后一个last-child{ };

• n也可以是公式：（公式里面的n是从0开始，但是第0个元素或者超出了元素的个数会被忽略）

如下图：

nth-of-type(n)

nth-of-type(n)中n可以是数字，关键字和公式：

• 表示父盒子里面的第一个first-of-type{ };

• 表示父盒子里面的最后一个last-of-type{ };

• n也可以是公式：（公式里面的n是从0开始，但是第0个元素或者超出了元素的个数会被忽略）

如下图

nth-child(n) 与 nth-of-type(n) 的区别

参照代码先感受一下：

光头强

熊大

熊二

1. section div:nth-child(1)设置样式，先是给所有盒子排序，再看第一个盒子是否是div这个盒子，再代码中第一个盒子是p标签这个盒子。

2. section div:nth-of-type(1)设置样式，把指定的盒子先找到再看排序。

伪类元素选择器

代码展示：