【前端面试3+1】17 伪类和伪元素的区别、CSS权重、图片显示优化、【二叉树最大深度】

一、伪类和伪元素的区别

1、伪类:

  • 伪类是用来描述元素的特定状态的选择器,比如:hover、:active、:first-child等。
  • 伪类在选择器中以**冒号(:)**开头,用于匹配处于特定状态的元素。
  • 伪类可以用于选择DOM元素的特定状态,但并不会在文档中生成新的内容。

示例:选择第一个子元素的样式

复制代码
ul li:first-child {
  color: red;
}

2、伪元素:

  • 伪元素是用来在文档中生成虚拟元素的选择器,比如::before、::after等。
  • 伪元素在选择器中以双冒号(::)开头,用于在元素的内容前后生成额外的样式。
  • 伪元素可以用于在元素的内容前后插入额外的内容,比如添加装饰性的内容或样式。

示例:在元素的内容前插入一个装饰性的元素

复制代码
p::before {
  content: "$";
}

3、小结:

伪类用于选择元素的特定状态,而伪元素用于在元素的内容前后生成虚拟元素。

二、CSS权重

CSS选择器的权重是用来确定样式优先级的重要概念,通常用于解决样式冲突的问题。CSS选择器的权重由四个部分组成,分别是:

  1. 内联样式:在元素的style属性中直接设置的样式。权重值为1000。
  2. ID选择器:通过#符号定义的选择器。权重值为100。
  3. 类选择器、属性选择器和伪类选择器:权重值为10。
  4. 元素选择器和伪元素选择器:权重值为1。

内联样式**>ID选择器>类选择器、属性选择器、伪类选择器>**元素选择器、伪元素选择器

根据以上规则,可以计算出CSS选择器的权重,权重值越高的样式会优先生效。如果两个样式的权重相同,则后定义的样式会覆盖前面定义的样式。

例如:

复制代码
#main-content .article p {
  color: blue;
}

.article p {
  color: red;
}

第一个选择器的权重为100(ID选择器#main-content) + 10(类选择器.article) + 1(元素选择器p),总权重为111。 第二个选择器的权重为10(类选择器.article) + 1(元素选择器p),总权重为11。

因此,第一个选择器的样式会优先生效,段落文本颜色为蓝色。

三、图片显示优化有哪些方法?

1、图片格式优化

选择合适的图片格式,如JPEG、PNG、WebP等,根据具体需求选择最适合的格式。JPEG适合照片和图像,PNG适合图形和透明效果,WebP是一种新一代的图片格式,具有更高的压缩率和更小的文件大小。

2、图片压缩

通过压缩图片文件大小来减少加载时间,可以使用在线工具或图片编辑软件对图片进行压缩。注意在压缩过程中保持图片质量,避免影响显示效果。

3、响应式图片

使用响应式图片技术,根据设备屏幕大小和分辨率加载不同尺寸的图片,提高页面加载速度和用户体验。可以使用srcset和sizes属性或者picture元素实现响应式图片加载。

4、懒加载

使用懒加载技术延迟加载图片,只有当图片即将进入视口时才加载,减少页面加载时间和带宽占用。可以通过JavaScript库如LazyLoad.js实现图片懒加载。

5、图片CDN加速

使用内容分发网络(CDN)来加速图片加载,将图片资源缓存到CDN节点,提高图片加载速度和用户体验。

6、图片预加载

预加载页面中即将显示的图片,提前加载图片资源,避免用户看到空白或等待过程。

7、图片优化工具

使用图片优化工具如ImageOptim、TinyPNG等,自动优化图片压缩和格式转换,提高页面性能。

四、【算法】二叉树最大深度

1、题目:

给定一个二叉树 root ,返回其最大深度。

补充:二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数

复制代码
/**
 * Definition for a binary tree node.
 * struct TreeNode {
 *     int val;
 *     struct TreeNode *left;
 *     struct TreeNode *right;
 * };
 */
int maxDepth(struct TreeNode* root) {
   
}

2、解题:

  • 使用递归的方式计算二叉树的最大深度。

  • 如果根节点为空,返回深度0。

  • 否则,分别计算左子树和右子树的最大深度。

  • 最大深度为1加上左子树和右子树中较大的深度。

  • 递归调用直到叶子节点,然后向上返回深度值。

    int maxDepth(struct TreeNode* root) {
    if (root == NULL) {
    return 0;
    } else {
    int leftDepth = maxDepth(root->left);
    int rightDepth = maxDepth(root->right);

    复制代码
          return 1 + (leftDepth > rightDepth ? leftDepth : rightDepth);
      }

    }

相关推荐
醋醋几秒前
vue2源码记录4
前端·vue.js
ccattempt1 分钟前
夯实基础-迭代器与生成器
前端
我怎么能这么帅气3 分钟前
拯救排版焦虑!CSS省略号的终极指南:单行、多行、生效与失效场景全解析
前端·css
lqstyle3 分钟前
Redis的Set:你以为我是青铜?其实我是百变星君!
后端·面试
迷路的小绅士15 分钟前
常见网络安全攻击类型深度剖析(四):跨站脚本攻击(XSS)——分类、漏洞利用与前端安全防护
前端·安全·web安全
BB_CC_DD19 分钟前
四. 以Annoy算法建树的方式聚类清洗图像数据集,一次建树,无限次聚类搜索,提升聚类搜索效率。(附完整代码)
深度学习·算法·聚类
前端snow23 分钟前
前端全栈第一课:用typeorm向数据库添加数据
前端
小希爸爸24 分钟前
3、中医基础入门和养生
前端·javascript·后端
摆烂工程师40 分钟前
ChatGPT免费用户可以使用Deep Research啦!并且o3、o4-mini的可使用次数翻倍!
前端·后端·程序员
狂炫一碗大米饭41 分钟前
作为前端你不得不知道的浏览器相关知识1🚀
前端