前端面试题汇总
JavaScript
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
性能
linux
前端资料汇总
在之前也有学习表单元素但我们相对学的比较基础,如下图:
现在我们新增了一些新的表单标签
具有更多的功能并且让它具有限制性,提高表单填写内容的准确性。
下图是新增的表单属性
=========================================================================
CSS3同样也是在CSS中引入新特性,在CSS原先基础上引入新特性。在这一块我们需要明确掌握:说出CSS的新增特性有哪些。
属性选择器
代码如下(示例):style里的样式
代码如下(示例):body里的样式
如图总结上方代码:
对于选择器中会有权重问题 当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) 的区别
参照代码先感受一下:
光头强
-
section div:nth-child(1)设置样式,先是给所有盒子排序,再看第一个盒子是否是div这个盒子,再代码中第一个盒子是p标签这个盒子。
-
section div:nth-of-type(1)设置样式,把指定的盒子先找到再看排序。
伪类元素选择器
代码展示: