1.❤️❤️前言~🥳🎉🎉🎉
Hello, Hello~ 亲爱的朋友们👋👋，这里是E绵绵呀✍️✍️。
如果你喜欢这篇文章，请别吝啬你的点赞❤️❤️和收藏📖📖。如果你对我的内容感兴趣，记得关注我👀👀以便不错过每一篇精彩。
当然，如果在阅读中发现任何问题或疑问，我非常欢迎你在评论区留言指正🗨️🗨️。让我们共同努力，一起进步！
加油，一起CHIN UP！💪💪
🔗个人主页：E绵绵的博客
📚所属专栏：1. JAVA知识点专栏
深入探索JAVA的核心概念与技术细节
2.JAVA题目练习
实战演练，巩固JAVA编程技能
3.c语言知识点专栏
揭示c语言的底层逻辑与高级特性
4.c语言题目练习
挑战自我，提升c语言编程能力
5.Mysql数据库专栏
了解Mysql知识点，提升数据库管理能力
6.html5知识点专栏
学习前端知识，更好的运用它
7. css3知识点专栏
在学习html5的基础上更加熟练运用前端
8.JavaScript专栏
在学习html5和css3的基础上使我们的前端使用更高级
📘 持续更新中，敬请期待❤️❤️
2.属性选择器
属性选择器是CSS的一种选择器，用于根据HTML元素的属性来选择元素。它允许你根据元素是否具有某个属性，或属性的具体值来应用样式。以下是几种常用的属性选择器及其用法：
1.E[att] 选择具有att属性的E元素
2.E[att="val"] 选择具有att属性且属性值等于val的E元素
3.E[att^="val"] 匹配具有att属性且值以val开头的E元素
4.E[att$="val"] 匹配具有att属性且值以val结尾的E元素5.E[att*="val"] 匹配具有att属性且值中含有val的E元素
其 [] 权重跟类选择器一样都为10.
3.结构伪类选择器
结构伪类选择器是CSS中用于选择元素的特定状态或位置的伪类。它们可以帮助开发者更灵活地选择元素，基于元素在文档中的结构或其关系。以下是一些常见的结构伪类选择器及其用法：
对于：nth中的 n我们可以是表达式，比如2n，2n+1等，n是从0开始计算的。
nth-child 对父元素里面所有孩子排序选择(序号是固定的) 先找到第n个孩子，然后看看是否和E匹配，不匹配则不生效。
nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找第n个孩子 ，这个就很稳定了。
该选择器权重为10.
4.伪元素选择器
常见的伪元素选择器有
::before，::after。
伪元素选择器生成的元素默认情况下是行内元素。这意味着使用伪元素（如
::before和::after）时，默认情况下内容会像普通文本一样在行内排列。不过，可以通过CSS样式将伪元素修改为块级元素（block element）或其他显示类型。
新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
伪元素
::before和::after必须具有content属性，否则不会生成任何内容。即使你为伪元素应用了其他样式（如颜色、背景等），如果没有定义content属性，伪元素将不会在页面上显示。 content属性用于插入文本内容。
5.border-box
box-sizing一般为content-box（默认值），不包含padding和boder。当
box-sizing设置为border-box时，宽度和高度会包含内边距和边框，因此内容区域的宽度会自动根据设置的内边距和边框大小进行调整，而不会超出设置的宽度和高度。
6. 将图片模糊处理
filter将模糊或颜色偏移等图形效果应用于元素
filter:函数;
filter:blur(5px)
blur为模糊处理，数值越大越模糊
7.calc函数
calc()此CSS函数让你在声明CSS属性值时执行一些计算。
width: calc(100%-80px);
括号里面可以使用 +-*/来进行计算。
8. 过渡
transition: 要过渡的属性 花费时间 运动曲线 何时开始；
属性：可以是宽度、高度、背景颜色、内外边距（如果想给所有的属性都变化过渡，那么写一个all就行）
花费时间：单位是秒（必须写单位）
运动曲线：默认是ease（可以省略）如0.5s
何时开始：单位是秒（必须写单位）可以设置延迟触发时间 默认是0s（可以省略）
谁做过渡给谁加，添加过渡，一般是鼠标经过，所以要设置好hover中的过渡后的值。
9.SEO优化
SEO优化：
对网站进行深度的优化，在搜索引擎上提升网站的排名
title网站的名字 网站名（产品名）+网站的介绍（不超过30个汉字），写在<title></title>中间
description对于网站的简短描述 <meta name="description" content=......>
keywords页面关键词，搜索引擎的关注点之一 <meta name="keywords" content=......>
它们都写在head标签中间
