推荐前端学习路线如下：
HTML、CSS、JavaScript、noodJS、组件库、JQuery、前端框架（Vue、React）、微信小程序和uniapp、TypeScript、webpack 和 vite、Vue 和 React 码源、NextJS、React Native、后端内容。。。。。。
层级选择器
a>b b是a的儿子级别
a+b b在a的后面 必须相邻 而且是兄弟
a~b b在a的后面 兄弟
属性选择器
img[alt] 写有alt属性的img
input[type="radio"] type="radio"的input
img[class~="mr20"] 类名中包含mr20的img
img[class^="pic"] 类名中以pic三个字母开头的img
img[class$="pic"] 类名中以pic三个字母结尾的img
img[class*="pic"] 类名中包含pic三个字母开头的img
img[class|="pic"] 类名中以pic为类名或者以pic-开头的img
伪类选择器
结构性伪类选择器
a:first-child{} 第一个子元素并且是a标签
a:last-child{} 最后一个子元素并且是a标签
a:nth-child(n){} 第n个子元素并且是a标签 2n（evev)偶数 2n+1(odd)奇数
a:only-child{} 只有一个子元素并且是 a 标签
a:nth-last-child(n){} 倒数第n个元素并且是 a 标签
a:first-of-type{} a标签中的第一个
a:nth-of-type(n){} a标签中的第n个
a:nth-last-of-type(){} a标签中的倒数第n个
a:only-of-type{} 只能有一个a标签
a:empty{} a标签中的空元素
目标伪类选择器
E:target 选择匹配E的所有元素 锚点
UI 元素状态伪类选择器
:enabled 可用状态
:disabled 禁用状态
:checked 被选中
:selection 文本被选中
否定伪类选择器
E:not(s) 匹配所有不匹配简单选择符s的元素E
动态伪类选择器
E:link 链接伪类选择器 定义了超链接并未被访问过
E:visited 链接伪类选择器 定义了超链接并已被访问过
E:active 用户行为选择器 定义匹配元素被激活状态
E:hover 用户行为选择器 定义用户鼠标停留状态
E:focus 用户行为选择器 获取焦点 文本框
浏览器前缀
-ms- IE浏览器前缀
-moz- 火狐浏览器前缀
-o- Opera（欧朋）浏览器前缀
-webkit- 谷歌、苹果浏览器前缀
@font-face的语法规则：
'''css
@font-face{
font-family: ""; 起名字
src: url(); 字体路径
}
div{
font-family: "";
}
inconfont
投影
文字投影
text-shadow:10px 10px 10px red;
x轴 Y轴 模糊 颜色
box-shadow:10px 10px 10px 10px red,inset 10px 10px 10px 10px red;
x轴 Y轴 模糊 拓展 颜色 内阴影
边框
border-radius:; 圆角
border-image-source:url(); 图片路径
border-image-slice:fill 27 27 27 27; 直接写数据不跟px 由边框向内切割距离
border-image-repeat:repeat/round/stretch 中间边框位置图片的平铺方式
border-image-outset:; 边框向外扩展距离 只是视觉上的效果
background:; 背景
background-color:;
background-image:url();
background-repeat:;
background-position:;
background-origin:; 背景图片开始渲染的位置
border-box padding-box(默认) content-box
background-clip:; 背景图片裁剪的位置 外面的剪掉 里面的留下
border-box padding-box(默认) content-box
background-size:;
100px 100px
100% 100%
cover 铺满 等比例缩放
cotain 图片全部展示 等比例缩放
渐变
线性渐变 background-image:linear-gradient();
linear-gradient(red,green,pink);
linear-gradient(to left,red,green);
linear-gradient(30deg,red,green);
linear-gradient(30deg,red 10%,green 20%);
repeating-linear-gradient(30deg,red 10%,green 20%);
径向渐变 background-image:radial-gradient();
radial-gradient(red,green,pink)
radial-gradient(circle,red,green,pink)
radial-gradient(at top left,red,green,pink) / radial-gradient(at 100px 200px,red,green,pink)
radial-gradient(circle at top left,red,green,pink)
radial-gradient(100px at top left,red,green,pink) / radial-gradient(closest-corner at top left,red,green,pink)
closest-corner/farthest-corner
closest-side/farthest-side
transition:; 过渡
transition-duration:; 持续时间 必不可少
transition-property:; 参与过渡的属性
transition-delay:; 延迟时间
transition-timing-function:; 过渡效果变化
transform:; 旋转
2D
transform:;
translate(x,y)/translateX()/translateY() 偏移
scale(x,y) / scaleX() / scaleY() 缩放
rotate(45deg) / rotateX(45deg) / rotateY(45deg) 旋转
skew(30deg,30deg) skewX() skewY() 倾斜(默认z轴)
transform-origin:center top; 中心点
3D
perspective:1200px; 透视点距离
transform-style:perserve-3d; 3D 样式
动画
@keyframes name{
from{}
to{}
}
或者
@keyframes name{
0%{}
100%{}
}
animation：； 复合属性，检索或设置对象所应用的动画特效
animation: cuihua 2s ;
animation-name:; 名字
animation-duration:; 时间
animation-delay:; 延迟
animation-timing-function:; 过渡效果
linear ease ease-in ease-out ease-in-out steps()
animation-iteration-count:; 循环次数
infinite（无限循环）
animation-direction:; 方向
reverse（反方向） alternate（正反） alternate-reverse（反正）
animation-paly-state:; 暂停
转载：https://blog.csdn.net/leoxingc/article/details/128105686