css3
1.属性选择器
2.结构伪类选择器
/* 找li标签里面 最后一个li标签 */li:last-child {background-color: #ffff55;}/* 找li标签里面 第一个li标签 */li:first-child {background-color: chartreuse;}
nth-child: 只按顺序找，类型必须匹配
nth-of-type: 按顺序找，如果类型不匹配，则继续下一个
/* 因其第一个元素不是 li, */li:nth-child(1) {background-color: red;}/* 可以使第一个 li有效果 */li:nth-of-type(1) {background-color: royalblue;}
<body><ul><p></p><li>1</li></ul></body>
/* li:nth-child( 英文 ，数字 ，表达式){}*//* even 偶数选择器 */li:nth-child(even) {background-color: chocolate;}/* odd奇数选择器 */li:nth-child(odd) {background-color: cornflowerblue;}/* 数字 */li:nth-child(2) {background-color: cornsilk;}/* n 代表所有的 li标签 */li:nth-child(n) {background-color: #ffffff;}/* 2n 2的倍数 2*0=0 2*1=2 2*2=4 2*3=6 奇数*/li:nth-child(2n) {background-color: #f3040f;}/* 2n+1 2的倍数+1 2*0+1=1 2*1+1=3 .... 偶数*/li:nth-child(2n+1) {background-color: #ffff55;}/* 选择器前五个 -n+5 -0+5=5 */li:nth-child(-n+5) {background-color: #fff;}/* 选择后五个 */li:nth-last-child(-n+5) {background-color: blue;}/* 从6往后的所有li */li:nth-child(n+6) {background-color: darkgrey;}/* 13-19 */li:nth-child(n+13):nth-child(-n+19) {background-color: darkgreen;}
3.伪元素选择器
可以帮助我们利用 css 创建新的标签元素 ，不用HTML标签，从而简化HTML
注：创建的元素 属于行内元素 权重为 1
**content:"";**必须
使用场景：
1.伪元素字体图标
.arrow-icon::after{content: "\e91e"; /* content: ""; 必写 */font-family: 'icomoon';font-size:18px;margin-left: 6px;}
仿土豆
/* 当鼠标经过土豆盒子，让里面的遮罩层显示出来*/.tudou:hover::before{/* 显示元素*/display:block;}
3.伪元素清除浮动
.clearfix::after {/* 必写属性 */content: "";/* 插入元素必须是块元素 */display: block;/* 不要看见这个元素 */height: 0;/* 清除元素 */clear: both;/* 不要看见这个元素 */visibility: hidden;}.clearfix {/* IE6,7专有 */*zoom: 1;}
.clearfix::before,.clear::after {content: "";/* 转化为块级元素 并且一行显示 */display: table;}.clear::after {clear: both;}.clearfix {/* IE6,7专有 */*zoom: 1;}
css3盒子模型
box-sizing：conten-box; （以前默认）
box-sizing: border-box; (padding 和 border 不会撑大盒子)
滤镜 filter
img {/* filter: 函数（） blur模糊处理 数值越大越模糊 */filter: blur(5px);}
修改所有图片的颜色为黑白 (100% 灰度): img {-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%);}
转化图像的透明程度:img {-webkit-filter: opacity(30%); /* Chrome, Safari, Opera */filter: opacity(30%);}
cale
过渡 transition
过渡动画：从一个状态 渐渐过渡到另一个状态。经常和 :hover 一起使用。
