CSS3选择器：
1.属性选择器：通过属性，属性值，结构
选择器[attr]{属性：属性值；} 匹配具有attr的元素
选择器[attr="value"] 匹配具有attr的属性，并且属性值为value的元素
选择器[attr^="value"] 以value开头的元素
选择器[attr$="value"] 以value结尾的元素
选择器[attr*="value"] 包含value的元素
选择器[attr~="value"] 仅有value或者是词列表的元素
选择器[attr|="value"] 仅有value或者以value-开头的元素
attr:表示属性的意思；
value:表示属性值；
2.结构伪类选择器：
第一组：子元素
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child(n)用于匹配索引值为n的子元素，自上而下
n：参数：可以是数值，表达式
even 偶数
odd 奇数
:nth-last-child(n) 匹配索引值为倒数第n个子元素
:only-child 匹配父元素中仅有的子元素
第一组结构伪类选择器特点：匹配的是父元素里所有的子元素，要求标签名和位置是匹配的才可以找到，父元素所有的标签名都参与计算
第二组：同级兄弟元素
:first-of-type 同类型的中的第一个同级兄弟元素
:last-of-type 同类型的中的最后一个同级兄弟元素
:nth-of-type 同类型的第n个同级兄弟元素，自上而下
:nth-last-of-type 同类型中倒数第n个兄弟元素
:only-of-type 同类型的唯一一个同级兄弟元素
第二组结构伪类选择器特点：同级的相同的兄弟元素中的第几个
3.UI元素状态伪类选择器：应用在表单元素里
:enabled 可用状态
:disabled 禁用状态
:checked 选中状态
:focus 焦点
:read-only 只读状态
:read-write 可编辑表单
取消复选框的默认样式属性:
appearance:none;
4.目标伪类选择器
:target 匹配url所指向的目标元素
配合锚点链接使用；
5.:root伪类选择器
匹配根元素html
6.:empty伪类选择器
匹配无内容元素
7.::selection伪元素选择器
匹配元素处于高亮状态
注：必须是双冒号
只能设置背景色和文本颜色
浏览器前缀：
IE -ms-
firefox -moz-
safair -webkit-
Chorme -webkit-
opera -o-
CSS3属性：
1.文本边框属性：text-stroke:width color;
width：边框宽度
color：边框颜色
说明：该属性需要加前缀-webkit-text-stroke
2.文本阴影属性：text-shadow: x y blur color;
x：水平方向的位置，数值加单位
y：垂直方向的位置，数值加单位
blur：模糊程度，数值加单位，默认0
color：阴影颜色(可选的，默认黑色)
说明：
x和y是必须有的，可以设置多个阴影，用逗号隔开
多阴影之间有层级关系，先写的层级最高
3.设置字体：@font-face：
语法：@font-face{
font-family:"iconfont";
src:url('iconfont.ttf') format('truetype');
}
4.字体图标的设置
使用字体图标的方法一：Unicode
使用字体图标的方法二：class方法
1.引入iconfont.css
2.先设置class="iconfont"名，在class中添加使用图标的名称iconfont-gerenzhongxin
例：<i class="iconfont iconfont-gerenzhongxin"></i>
使用字体图标的方法三：js方法
1.先引入js文件
背景属性：
1.背景原点属性：初始位置
background-origin:;
padding-box 在padding区显示，默认值
border-box 在border区显示
content-box 在content区显示
2.背景裁剪属性：
background-clip:;
padding-box 在padding区以外的被裁剪
border-box 在border区以外的被裁剪，默认值
content-box 在content区以外的被裁剪
text 在文本以外的被裁剪，需要加前缀
3.背景尺寸属性：
background-size:;
px 一个值：宽度，高度等比例缩放 两个值：宽度 高度
% 根据元素显示%大小，
cover 背景图完全覆盖背景区域
contain 高度或宽度完全自适应
4.背景的复合属性：
background: #0f0 url() no-repeat center top/size origin clip;
复合属性是background-size和background-origin和background-clip位置不能互换
5.多背景设置：
background:url() no-repeat,url() no-repeat right top,
url() no-repeat left bottom,url() no-repeat right bottom,url() no-repeat center;
多背景设置时用逗号隔开，先写的层级最高；
滤镜：
模糊滤镜：blur
filter:blur(数值);
黑白滤镜：grayscale
filter：grayscale(0%-100%);
圆角属性：
圆角属性：
border-radius:;
单一设置：
border-top-left-radius:;左上角
border-top-right-radius:;右上角
border-bottom-left-radius:;左下角
border-bottom-right-radius:;右下角
复合设置：
border-radius:1; 四个角的值相等
border-radius:1 2; 左上和右下 ，右上和左下
border-radius:1 2 3; 左上 ，右上和左下 ，右下
border-radius:1 2 3 4;左上 ，右上 ，右下 ，左下
分别设置x和y的角的弧度：
border-radius:x1 x2 x3 x4 / y1 y2 y3 y4;
width属性：
width的属性值：
max-content根据最大内容显示
min-content根据最小内容显示
calc()方法：四则远算
可以实现不同单位的值进行计算
注：
1.运算符前后要有空格
2.乘和除要是用倍数参与计算
