刷面试题
刷题的重要性,不用多说。对于应届生或工作年限不长的人来说,刷面试题一方面能够尽可能地快速自己对某个技术点的理解,另一方面在面试时,有一定几率被问到相同或相似题,另外或多或少也能够为自己面试增加一些自信心,可见适当的刷题是很有必要的。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
前端字节跳动真题解析
-
【269页】前端大厂面试题宝典
最后平时要进行自我分析与评价,做好职业规划,不断摸索,提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难,摆好心态,做好准备,你也可以的。
父级 子级{属性:属性值;属性:属性值;}
.class h3 {color:red;font-size:16px;}
-
当标签发生嵌套时,内层标签就成为外层标签的后代。
-
子孙后代都可以这么选择。或者说,它能选择任何包含在内的标签。
「2. 子元素选择器」
-
子元素选择器只能选择作为某元素子元素(亲儿子)的元素。
-
其写法就是把父级标签写在前面,子级标签写在后面,中间跟一个
>
进行连接 -
这里的子,指的是亲儿子。不包含孙子 重孙子之类。
.class>h3 {color:red;font-size:14px;}
「3. 交集选择器」
- 其中第一个为标签选择器,第二个为class选择器,两个选择器之间
不能有空格
,如h3.special。
交集选择器是并且的意思,即…又…的意思
比如:
p.one {}
选择的是: 类名为 .one 的段落标签。
/用的相对来说比较少,不建议使用。/
「4. 并集选择器」
如果某些选择器定义的相同样式,就可以利用并集选择器,可以让代码更简洁。并集选择器(CSS选择器分组)是各个选择器通过,
连接而成的,通常用于集体声明。
-
任何形式的选择器(包括标签选择器、class类选择器 id选择器等),都可以作为并集选择器的一部分。
-
并集选择器
通常用于集体声明 ,逗号隔开的
,所有选择器都会执行后面样式,逗号可以理解为和的意思。
比如
.one,
p ,
#test {color: #F00;}
表示 .one 和 p 和 #test
这三个选择器都会执行颜色为红色。 通常用于集体声明。
「5. 链接伪类选择器」
用于向某些选择器添加特殊的效果。写的时候,他们的顺序尽量不要颠倒,按照lvha的顺序。否则可能引起错误。
链接伪类,是利用交集选择器.
-
a:link
未访问的链接 -
a:visited
已访问的链接 -
a:hover
鼠标移动到链接上 -
a:active
选定的链接
实际工作中,很少写全四个状态,一般写法如下:
a { /* a是标签选择器 所有的链接 */
font-weight: 700;
font-size: 16px;
color: gray;
text-decoration: none; /* 清除链接默认的下划线*/
}
a:hover { /* :hover 是链接伪类选择器 鼠标经过 */
color: red; /* 鼠标经过的时候,由原来的 灰色 变成了红色 */
}
「6. 结构(位置)伪类选择器(CSS3)」
-
:first-child :选取属于其父元素的首个子元素的指定选择器
-
:last-child :选取属于其父元素的最后一个子元素的指定选择器
-
:nth-child(n) : 匹配属于其父元素的第 N 个子元素,不论元素的类型
-
:nth-of-type(n): 简单来说nth-of-type会忽略其它标签的顺序而安装标签自身种类的顺序进行筛选,也就是选择的参照点并不是DOM数,而是自身。
-
:nth-last-child(n) :选择器匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数。
n 可以是数字、关键词或公式
li:first-child { /* 选择第一个孩子 */
color: pink;
}
li:last-child { /* 最后一个孩子 */
color: purple;
}
li:nth-child(4) { /* 选择第4个孩子 n 代表 第几个的意思 */
color: skyblue;
}
nth-child介绍
nth-child(n) 选择器匹配属于其父元素的第 n 个子元素。
使用它的时候需要注意几点:
-
第n个子元素的计数是从1开始,不是从0开始的
-
选择表达式中的字母n代表≥0的整数
它有3种常见用法
-
直接指明n的值:span:nth-child(1)
-
用even/odd分别代表偶数 / 奇数:span:nth-child(even)
-
借助n自定义选择范围:
-
nth-child(2n)/nth-child(2n + 1):偶数 / 奇数
-
nth-child(n + 3):第3个开始到最后
进阶用法
上面的用法中的第三部分,一般都是使用n,而有时候也会用到-n,比如选取前2个元素就是:nth-child(-n + 2)。
为什么是这样呢?其实运算:-n + 2 ≥ 0,就可以推出n ≤ 2。 由此,结合两者自动取交集,我们就可以限制选择某一范围。
比如选择第6个到第9个,就是::nth-child(-n+9):nth-child(n+6) 注意:不是nth-child(2 - n),-n要写在一起! 真正理解“子元素”的含义 还是nth-child选择器,那么下面这段代码的样式是什么呢?
1
2
3
答案是:1是黑色的,2和3都是红色的。
因为<span>2</span>
是其父节点的第2个(偶数)子元素,<span>3</span>
是其父节点的第2个子元素,第一个是<div></div>
所以辨别是否匹配的关键是:找到父元素,然后再计算在父元素中的位置。
nth-of-type与nth-child的区别
nth-of-child:
它的属性就是按照所有类型标签的所谓整体队列进行排序筛选,也就是说不论你是h1,span还是p标签,使用这个属性你要遵循在DOM树中的顺序来进行操作。
nth-of-type:
简单来说nth-of-type会忽略其它标签的顺序而安装标签自身种类的顺序进行筛选,也就是选择的参照点并不是DOM数,而是自身。就是按照类型来计算,碰到一个同类型就加1。
「7. 目标伪类选择器(CSS3)」
:target目标伪类选择器 :选择器可用于选取当前活动的目标元素
:target {
color: red;
font-size: 30px;
}
「8. 复合选择器总结」
| 选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
| :-- | :-- | :-- | :-- | :-- |
| 后代选择器 | 用来选择元素后代 | 是选择所有的子孙后代 | 较多 | 符号是空格
.nav a |
| 子代选择器 | 选择 最近一级元素 | 只选亲儿子 | 较少 | 符号是>
.nav>p |
| 交集选择器 | 选择两个标签交集的部分 | 既是 又是 | 较少 | 没有符号
p.one |
| 并集选择器 | 选择某些相同样式的选择器 | 可以用于集体声明 | 较多 | 符号是逗号
.nav, .header |
| 链接伪类选择器 | 给链接更改状态 | | 较多 | 重点记住 a{} 和 a:hover 实际开发的写法 |
属性选择器
选取标签带有某些特殊属性的选择器 我们成为属性选择器
| 选择器 | 含义 |
| — | — |
| E[attr] | 存在attr属性即可 |
| E[attr|=val] | 选择attr属性的值是 val
或值以 val-
开头的元素 |
| E[attr=val] | 属性值完全等于val |
| E[attr^=val] | 属性值里面包含val字符并且在“开始”位置 |
| E[attr$=val] | 属性值里面包含val字符并且在“结束”位置 |
| E[attr*=val] | 属性值里面包含val字符并且在“任意”位置 |
/* 获取到 拥有 该属性的元素 */
div[class^=font] { /* class^=font 表示 font 开始位置就行了 */
color: pink;
}
div[classKaTeX parse error: Expected '}', got 'EOF' at end of input: …er] { /* class=footer 表示 footer 结束位置就行了 */
color: skyblue;
}
div[class*=tao] { /* class*=tao *= 表示tao 在任意位置都可以 */
color: green;
}
最后
面试一面会问很多基础问题,而这些基础问题基本上在网上搜索,面试题都会很多很多。最好把准备一下常见的面试问题,毕竟面试也相当与一次考试,所以找工作面试的准备千万别偷懒。面试就跟考试一样的,时间长了不复习,现场表现肯定不会太好。表现的不好面试官不可能说,我猜他没发挥好,我录用他吧。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
96道前端面试题:
常用算法面试题:
前端基础面试题:
内容主要包括HTML,CSS,JavaScript,浏览器,性能优化
这些基础问题基本上在网上搜索,面试题都会很多很多。最好把准备一下常见的面试问题,毕竟面试也相当与一次考试,所以找工作面试的准备千万别偷懒。面试就跟考试一样的,时间长了不复习,现场表现肯定不会太好。表现的不好面试官不可能说,我猜他没发挥好,我录用他吧。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
96道前端面试题:
- [外链图片转存中…(img-MKYBUt2g-1715392235859)]
常用算法面试题:
- [外链图片转存中…(img-Ww5N6EaW-1715392235860)]
前端基础面试题:
内容主要包括HTML,CSS,JavaScript,浏览器,性能优化
- [外链图片转存中…(img-j1rGRmvq-1715392235861)]