自定义博客皮肤VIP专享

*博客头图：

点击选择上传的图片

格式为PNG、JPG，宽度*高度大于1920*100像素，不超过2MB，主视觉建议放在右侧，请参照线上博客头图

请上传大于1920*100像素的图片！

博客底图：

点击选择上传的图片

图片格式为PNG、JPG，不超过1MB，可上下左右平铺至整个背景

栏目图：

点击选择上传的图片

图片格式为PNG、JPG，图片宽度*高度为300*38像素，不超过0.5MB

主标题颜色：

RGB颜色，例如：#AFAFAF

Hover：

RGB颜色，例如：#AFAFAF

副标题颜色：

RGB颜色，例如：#AFAFAF

预览取消提交

自定义博客皮肤

-+

上一步保存

2301_79702866的博客

奇偶变不变

博客等级

码龄2年

46
原创

924
点赞

804
收藏

571
粉丝

关注

私信

热门文章

分类专栏

AI 5篇
单片机 1篇
嵌入式硬件 1篇
C语言 6篇
计算机三级 11篇
嵌入式软件 21篇
Markdown 2篇
操作系统 2篇
RT-Thread 10篇
Agent 2篇
数据结构 4篇
链表 2篇

最新评论

ARM芯片怎么才能用GCC在Linux下裸奔编译，不用被Keil/IAR绑架
新绿MEHO: 框架协议
30分钟学会css
奇偶变不变: 优化 CSS 选择器的性能和可维护性，核心在于平衡执行效率与代码可读性。以下从语义化类名、选择器优先级和常用单位三个方面进行探讨。语义化类名：提升可读性和可维护性的基石使用描述元素内容和功能的类名，而非样式。例如，用 .product-title 代替 .bold-red-text。案例：差： <div class="red-box big-font left">产品标题</div> (样式描述) 优： <div class="product-title">产品标题</div> (内容描述) 优势：代码更易理解，修改样式不影响 HTML 结构，利于团队协作。当需求变化时，只需修改 CSS，无需修改 HTML。选择器优先级：保持清晰的层叠关系理解浏览器解析 CSS 的优先级顺序（内联样式 > ID选择器 > 类选择器/属性选择器/伪类 > 元素选择器/伪元素 > 通配符选择器）。避免过度具体和复杂的选择器，如 #header .nav-list li a.active，这会降低性能且难以覆盖。案例：差： #content .article-list .item a.link-special (过度具体) 优： .special-link (更简洁) 策略：尽量使用单一类选择器，利用 CSS 层叠性覆盖样式，而非提高选择器优先级。避免滥用 !important，它会破坏层叠关系。常用单位的使用：提升灵活性和可访问性 rem：相对于根元素字体大小，利于全局尺寸调整和可访问性。 em：相对于父元素字体大小，适用于组件内部尺寸调整。 %：相对于父元素尺寸，用于响应式布局。 vw 和 vh：相对于视口尺寸，用于全屏布局。 px：绝对单位，适用于边框等对精度要求高的场景，但灵活性较差。案例：差： .container { width: 960px; padding: 20px; } h1 { font-size: 24px; } (固定尺寸) 优： .container { max-width: 960px; padding: 1.25rem; } h1 { font-size: 1.5rem; } (使用 rem，更灵活)
30分钟学会css
奇偶变不变: 优化 CSS 选择器的性能和可维护性，核心在于平衡执行效率与代码可读性。以下从语义化类名、选择器优先级和常用单位三个方面进行探讨。语义化类名：提升可读性和可维护性的基石使用描述元素内容和功能的类名，而非样式。例如，用 .product-title 代替 .bold-red-text。案例：差： <div class="red-box big-font left">产品标题</div> (样式描述) 优： <div class="product-title">产品标题</div> (内容描述) 优势：代码更易理解，修改样式不影响 HTML 结构，利于团队协作。当需求变化时，只需修改 CSS，无需修改 HTML。选择器优先级：保持清晰的层叠关系理解浏览器解析 CSS 的优先级顺序（内联样式 > ID选择器 > 类选择器/属性选择器/伪类 > 元素选择器/伪元素 > 通配符选择器）。避免过度具体和复杂的选择器，如 #header .nav-list li a.active，这会降低性能且难以覆盖。案例：差： #content .article-list .item a.link-special (过度具体) 优： .special-link (更简洁) 策略：尽量使用单一类选择器，利用 CSS 层叠性覆盖样式，而非提高选择器优先级。避免滥用 !important，它会破坏层叠关系。常用单位的使用：提升灵活性和可访问性 rem：相对于根元素字体大小，利于全局尺寸调整和可访问性。 em：相对于父元素字体大小，适用于组件内部尺寸调整。 %：相对于父元素尺寸，用于响应式布局。 vw 和 vh：相对于视口尺寸，用于全屏布局。 px：绝对单位，适用于边框等对精度要求高的场景，但灵活性较差。案例：差： .container { width: 960px; padding: 20px; } h1 { font-size: 24px; } (固定尺寸) 优： .container { max-width: 960px; padding: 1.25rem; } h1 {

Markdown

关注

文章平均质量分 95

关注数：文章数：2 文章阅读量：2566 文章收藏量：37

作者: 奇偶变不变

你好！这里是奇偶变不变 | 象限符号辨，我的个人知识库，记录我学习和思考的地方。这里没有特定的主题，从技能到灵感，从工具到感悟，聚焦学习与成长。这不仅是我的成长记录，也是一个开放的空间，关注我，一起感受知识积累的乐趣吧！

展开