1.属性选择器
<div abc="zb">zb</div>
div[abc]{**} // 含有abc属性的div
div[abc='zb']{**} // 含有值为zb的abc属性的div
div[abc^='zb']{**} // 含有值以zb开头的abc属性的div
div[abc$='zb']{**} // 含有值以zb结尾的abc属性的div
div[abc*='zb']{**} // 含有值中含有zb的abc属性的div
div[abc~='zb']{**} // 含有值中含有单词zb的abc属性的div
2.伪类选择器
父选择器 div:first-child{**} // 选择第一个子元素且该元素为div
父选择器 div:last-child{**} // 选择最后一个子元素且该元素为div
父选择器 div:nth-child(n){**} // 选择第n个元素且该元素为div
父选择器 div:first-of-type{**} // 选择第一个div元素
父选择器 div:last-of-type{**} // 选择最后一个div元素
父选择器 div:nth-of-type(n) // 选择第n个div元素
父选择器 div:only-child{**} // 选择只有一个子元素且子元素为div 的div子元素
div:empty{**} // 选择内容为空的div元素
:disabled{**}
:checked{**}
3.圆角
border-top-left-radius 左上角
border-top-right-radius 右上角
border-bottom-right-radius 右下角
border-bottom-left-radius 左下角
复合属性：border-radius
4.盒阴影box-shadow
参考文章： juejin.cn/post/716471…
5.文字阴影text-shadow
6.线性渐变，径向渐变
7.新增盒子模型，box-sizeing:border-box;
div{
width: 200px;
height: 200px;
background: pink;
box-sizing: content-box;
border: solid 50px red;
}
div{
width: 200px;
height: 200px;
background: pink;
box-sizing: border-box;
border: solid 50px red;
}
8.弹性盒子布局 flex布局
9.过渡 transition
10.动画 animation
11.transform系列
transform: translate 平移
transform：scale 缩放
transform: rotate 旋转
