选择器可以简化网页代码的编写，使安全结构更加简单。 CSS3中常见的属性选择器主要有E[att^=value]、E[att$=value]和E[att*=value]这三个性别选择器如下：
1.E[att^=value]属性选择器
E[att^=value] 属性选择器是指选择名为E的标签，该标签定义了att属性，att属性值包含以value为前缀的子字符串。 需要说明的是，E可以省略。 如果省略，则表示任何符合条件的标签都可以匹配。 例如css3新增选择器，div[id^=section] 表示匹配包含 id 属性且其值以字符串“section”开头的 div 元素。
2.E[att$=value]属性选择器
E[att$=value] 属性选择器是指选择名为E的标签，该标签定义了att属性，att属性值包含以value为后缀的子字符串。 与E[att^=value]选择器一样，E元素可以省略css3新增选择器，如果省略则表示任何满足条件的元素都可以匹配。 例如，div[id$=section] 匹配包含 id 属性（其值以字符串“section”结尾）的 div 元素。
3. E[att * = value]选择器
E[att * = value]选择器用于选择名为E的标签，该标签定义了att属性，att属性值包含value子字符串。 这个选择器与前两个选择器相同，E元素也可以省略。 如果省略，则表示任何满足条件的元素都可以匹配。 例如，div[id * =section] 匹配包含 id 属性且其值包含字符串“section”的 div 元素。
总结：新功能大致分为以下六类：选择器、边框、圆角、背景以及渐变、过渡和动画。 下面我们就来说说以上六大类的内容。 选择器 基本选择器 基本选择器分为子选择器 相邻同级选择器 通用同级选择器 组选择器 属性选择器 带属性的样式元素 带属性的样式元素 选择属性值包
CSS3的新特性大致分为以下六类
1.CSS3选择器
2. CSS3边框和圆角
3. CSS3背景和渐变
4. CSS3 过渡
5.CSS3改造
6.CSS3动漫
下面我们分别谈谈以上六大类的内容。
CSS3 选择器
1. 基本选择器
基本选择器进一步分为
子选择器
相邻兄弟选择器
通用兄弟选择器
组选择器
2. 属性选择器
1. 元素[属性]
为具有attribute属性的元素设置样式
2. 元素[属性=“值”]
设置具有 attribute="value" 属性的元素的样式
3. 元素[属性~=“值”]
选择attribute属性值包含phrase值的元素并设置样式
4. 元素[属性*=“值”]
选择attribute属性值包含value的元素来设置样式
5. 元素[属性^="值"]
选择attribute属性值以value开头的元素
6. 元素[属性$=“值”]
选择attribute属性值以value结尾的元素
注意3和4的区别
3. 伪类选择器
动态伪类
定义：这个伪类不存在于 HTML 中，只有当用户与网站交互时才会显示出来。
1.锚定伪类
:link :visited
2. 用户行为伪类
:hover :active :focus
3. 目标伪类
:target 当我们点击锚点链接时，对应id的元素会显示在视口
4.检查状态伪类
这里我们要知道，checkbox只能设置宽度和高度，不能设置背景和边框。 如果我们想设置这个，我们需要使用appearance:none; 消除输入的默认样式
CSS3结构类：第n个选择器
：第一个孩子/最后一个孩子
句子成分：第一个孩子
选择作为父元素的第一个/最后一个子元素的每个元素元素，注意该元素是子元素。
:第n个孩子(n)
选择某个元素下的第n个元素（n为简单表达式，不能用其他字母代替），也可以在括号中传入odd和even两个关键字
:第n个最后一个孩子(n)
匹配属于某个元素的第n个元素子元素，从最后一个子元素开始计数
:第 n 个类型(n)
句子元素：第n个类型(n)
匹配属于父元素的特定类型的第n个子元素，element是指定类型的子元素
:nth-last-of-type
匹配属于父元素的特定类型的第 n 个子元素，从最后一个开始计算
:第一个类型/:最后一个类型
匹配属于其父元素的特定类型的第一个/最后一个子元素的每个元素
： 唯一的孩子
匹配作为父元素的唯一子元素的每个元素
: 唯一类型
匹配作为其父元素特定类型的唯一子元素的每个元素
：空的
匹配没有子元素的每个元素（包括文本节点）
负选择器：不
定义：匹配非元素或选择器的每个元素
句型：父元素：not（子元素或选择器）
示例：ul:not(span){}
伪元素（也可以使用：）
元素::第一行
定义：设置元素的第一行文本，只能用于块级元素
元素::第一个字母
定义：用于给文本的第一个字母设置特殊的样式，仅适用于块级元素
元素::之前
定义：在元素内容上方插入新内容，常与content结合使用
元素::之后
定义：在元素内容前面插入新内容，常与content结合使用
元素::选择
定义：用于设置浏览器中选中文本的背景色和前景色
伪元素和元素的区别：
通过 JS 获取其 DOM 失败
通过浏览器开发者工具直接查看失败
伪元素默认是内联的
使用伪元素的注意事项：
1.前后使用伪元素必须设置内容
2、before和after使用伪元素显示背景图片，并且一定要使用display将其设置为块元素
3、前后使用伪元素设置display:inline-block，需要再次设置vertical-align:middle
CSS3 边框和圆角
1.CSS3圆角边框半径
定义：可以给元素（块元素、内联块元素、行内元素）添加圆角边框
属性：
border-top-left-radius 左上角
border-top-right-radius 右上角
border-bottom-right-radius 右下角
边框左下半径左下角
复合属性：边框半径：
属性值
四个值：左上角 右上角 右下角 左下角
三个值：左上、右上、左下、右下
两个值：左上、右下、右上、左下
一值：4个角全部生效
border-radius中的属性值由两个参数值组成：value1/value2，用/分隔，value1代表圆角的水平直径css3背景，value2代表圆角的垂直直径。
正方形和椭圆形：
一旦使用比率，参考就是元素本身的高度和长度
取50%时，宽度等于高度，宽度不等于高度，是一个椭圆
2.盒子阴影box-shadow
定义：一个可以控制一个或多个阴影的框
句子模式：box-shadow：水平方向倾斜量、垂直方向倾斜量、模糊程度、膨胀程度、颜色是否有内阴影
属性值介绍：
倾斜量：
把元素左上角（0，0）作为基准点，找水 平方向和垂直方向的偏移量 水平： 正值 --- 右 ，负值 --- 左 垂直： 正值 --- 下 ，负值 --- 上
模糊度：
边界模糊，但是边界线未动 由边界线向外模糊多少像素
可扩展性：
盒子阴影，上下左右都向外扩展多少像素
是否有内阴影:
inset(默认没有，也就是默认是外阴影) 加上inset,盒子的阴影为内阴影 扩展程度可为负值，但是模糊程度不可以
CSS3 背景和渐变
1.CSS3背景
背景图
句型：
背景图片:url("1.jpg),url("2.jpg")
使用冒号分隔图像
注意：元素引入多张背景图片，上一张图片会覆盖上一张图片
背景 cilp
定义：指定背景的轮廓区域（裁剪）
句型：
背景 cilp：边框框/填充框/内容框
属性介绍：
border-box：背景被裁剪到边框框（背景图从边框绘制）---默认
padding-box：背景被裁剪到内行间距框（背景图像是从内行间距开始绘制的）
content-box：背景被剪切到内容框
背景起源
定义：设置背景图片的原始起始位置
句型：
background-origin：border-box/padding-box/content-box（背景图的坐标原点与这三者有关）
属性介绍：
border-box：相对于边框定位
padding-box：相对于内行间距定位
content-box：相对于内容框定位
另一件要知道的事
background-position：定义背景图像的位置，低于水平和垂直方向（参考点）的偏转量
背景重复
定义：设置背景图片是否重复以及如何重复。 默认情况下，背景图像在水平和垂直方向上重复。
属性值：
重复默认。 背景图像将垂直和水平重复。
Repeat-x 背景图像将水平重复。
重复 y 背景图像将垂直重复。
no-repeat 背景图像只会显示一次。
继承指定background-repeat属性的设置应该从父元素继承
背景大小
定义：指定背景图像的大小
句型：
背景大小：数字/%/覆盖/包含
属性介绍：
number：长度和高度（如果只写一个值，第二个值默认为auto）
比例：0%-100%之间的任意值，此时的比例指的是元素div的大小
cover：背景图像被缩放以填充整个容器（最远的边缘）。 如果高度达到一定比例100%，多余的长度就会溢出，具体溢出部分取决于定位
contains：缩放背景图像，直到一侧靠近容器的边缘（最近的一侧）。 如果图片高度比较小，高度处会出现空白区域
复合地产背景
定义：所有背景属性都可以在一个声明中设置
句型：
背景:colorpositionsizerepeatoriginclipartachmentimage;背景:#abccenter50%no-repeatcontent-boxcontent-boxfixedurl("1.jpg"),url("2.jpg")...
2.CSS3渐变
定义：可以显示两种或多种指定颜色之间转换的过渡
线性渐变
定义：就是沿着一个轴改变颜色，从起点到终点进行顺序渐变（从一侧拉到另一侧）
句子模式：背景：线性渐变（方向、起始颜色、结束颜色）
方向介绍：
1.方向从上到下（默认）
背景：线性渐变（红色，蓝色）；
2.方向从左到右
背景：线性渐变（右、红、蓝）；
3. 对角线
背景：线性渐变（torightbottom，红色，蓝色）；
4. 角度（单位deg）
背景：线性渐变（角度、红色、蓝色）；
角度注释：0deg 将创建从下到上的渐变，90deg 将创建从左到右的渐变
颜色节点：默认情况下，每种颜色均匀分布
背景：线性渐变（红10%，蓝20%，绿30%，黄40%）；
从0%到10%，是白色，从10%到20%，是从黄到红的渐变，从20%到30%，是从黄到红的渐变，从30%到40%，它是从红色到紫色的渐变，白色从 40% 到 100%
背景：线性渐变（红色10%，蓝色）；
从0%到10%，是白色，从10%到100%，是从黄到红的渐变
最后，如果不写具体值，则默认为100%
背景：线性渐变（红，蓝30%）；
从0%到30%，是从白色到紫色的渐变
如果第一个不写，则默认值为0%
背景：线性渐变(rgba(255,0,0,0),rgba(255,0,0,1));
从透明变为不透明
重复梯度
示例：背景：重复线性渐变（90deg，red0％，blue20％）； 或背景：重复线性渐变(90deg,red0%,blue10%,red20%);
注：将元素总长度视为100%
径向渐变
定义：从起点到终点，颜色由外向外逐渐渐变
句子模式：背景：径向渐变（形状规范、起始颜色、结束颜色）
形状分类：
圆形---方形
椭圆---椭圆
注意：当元素的高度和宽度相同时，无论设置哪个参数，都是一个矩形
尺寸：
最近边最近边
背景：径向渐变（最近侧圆，红色，蓝色）；
最远边 最远边
背景：径向渐变（最远侧圆，红色，蓝色）；
最近的角点 最近的角点
背景：径向渐变（最近角圆，红色，蓝色）；
最远角 最远角
背景：径向渐变（最远角圆，红色，蓝色）；
颜色节点：
例子：
背景：径向渐变（圆形，红色50％，蓝色70％）；
注：此时的比例指的是圆心到元素最远端的距离（角度）
重复渐变：
示例：背景：重复径向渐变（红色0％，蓝色20％）；
背景：重复径向渐变（红色0％，蓝色10％，红色20％）；
CSS3 过渡
定义：让CSS属性值在一定的时间间隔内平滑过渡，在键盘点击、键盘滑动或元素的任何变化时触发，以动画的方式平滑地改变CSS属性值。
属性：
1.transition-property属性
定义：设置对象中涉及过渡的属性
句型：transition-property: none|all|property
参数说明：
none：没有属性改变
all：默认值，所有属性都改变
property：元素属性名称宽度、颜色等。
2.transition-duration属性
定义：设置对象过渡的持续时间
句型：转换持续时间：时间
参数说明：
指定完成转场效果所需的时间，单位为秒或微秒，默认值为0
3.transition-timing-function属性
定义：设置对象过渡的动画类型
句子模式：只能使用一个属性值
参数说明：
ease：平滑过渡（0--slow--fast-slow），默认值
三次贝塞尔曲线(0.25,0.1,0.25,1)
线性：线性过渡（匀速）cubic-bezier(0,0,1,1)
缓入：慢速 - 快速三次贝塞尔曲线 (0.42,0,1,1)
缓出：快 - 慢三次贝塞尔曲线 (0,0,0.58,1)
缓入缓出：慢 - 快 - 慢
三次贝塞尔曲线(0.42,0,0.58,1)
贝塞尔曲线：#.17，...
4.transition-delay属性
定义：设置对象延迟的过渡时间
句子模式：转换延迟：时间
参数说明：
指定延迟开始动画处理的秒数或微秒数，默认为0
5.过渡复合属性
句型：
转换：属性持续时间定时函数延迟；
参数说明：过渡时间和延迟时间的顺序不能乱
CSS3 变换
定义：让一个单元在坐标系中变形。 该属性包含一系列变换函数，可以连接、旋转和缩放元素。
句型：变换：无 | 默认值为无
二维变换
1.rotate() 旋转
定义：通过指定角度参数来指定元素的 2D 旋转
句型：变换：旋转（角度）单位deg
参数说明：angle指旋转角度，负数表示顺时针旋转，正数表示逆时针旋转
2.translate() 翻译
定义：根据X轴和Y轴的位置，给出参数，使当前元素位置通讯
分类：
translateX() 仅水平通信
句型：transform:translateX()单位px
translateY() 仅垂直连接
句型：transform:translateY()单位px
translate(x,y) 同时水平和垂直连接
句型：transform:translate(X,Y)单位px
注：如果只写一个参数css3背景，第二个默认为0，即只设置水平方向的位移
3.scale() 缩放
定义：设置元素的缩放级别
分类：
scaleX() 仅水平缩放
句型：transform:scaleX()没有单位
scaleY() 仅垂直缩放
副题句型：transform:scaleY()没有单位
scale(x,y) 水平和垂直缩放元素
句型：transform:scale(x,y)没有单位
4.skew() 扭曲/倾斜
定义：设置元素的倾斜状态
分类：
skewX() 只使元素在水平方向扭曲，变形单位deg的正值----防秒针
skewY() 仅在垂直方向扭曲元素。 变形单位deg的正值----顺时针
skew() 使元素在水平方向和垂直方向扭曲变形单位deg
注：0deg 与 180deg 效果相同
5. 变换基点
定义：单元变换的基准点
句型：transform-origin: 水平方向 垂直方向
参数说明：
lefttop 左上角 - 所有四个角都可以
25%顶部
50像素50像素
默认值：
旋转几何中心点
倾斜几何中心点
比例尺几何中心点
翻译自身位置
3D 变换
1.开启3d空间变换样式：preserve-3d； 通常向父元素开放
2.设置子元素3d变换的效果
旋转
旋转X()
定义：指物体在X轴上的旋转角度（变换基点：50%50%0）
旋转Y()
定义：指物体在Y轴上的旋转角度（变换基点：50%50%0）
旋转Z()
定义：指物体在Z轴上的旋转角度（变换基点：50%50%0）
翻译
翻译 Z()
定义：指物体在Z轴前方的平移（变换基点：50%50%0）
规模
缩放Z()
定义：指定物体的Z轴缩放（变换基点：50%50%0）（没有多大意义，开放3d空间）
3.设置白平衡：实现近大远小
父元素和子元素都可以设置
父元素：透视：300px；
子元素：
变换：透视（300px）translateZ（-200px）；
注：Bokeh：可选值：小于等于0，bokeh值越大，元素看起来越大
默认值：0——无散景（不能为负数）
4. 变换基点
默认值：50%50%0
变换原点：顶部； 关键字的意思是（50）
注意：立体3d包Z：只能使用特定宽度，不能使用比例和关键字
5.散景中心点：改变观看者的视角
透视图原点：顶部；
透视图来源：topright；
6. 元素反面是否可见
背面可见性：可见； （默认：可见）
背面可见性：隐藏； 无形的
CSS3 动漫
定义：将元素从一种样式逐渐更改为另一种样式的效果
@关键帧
定义：keyframes关键帧，用于确定动画变化的关键位置
注意：关键帧控制关键位置，而不是所有位置
语法：@keyframes animationname{
keyframes-selector{
cssStyles;
}
}
animationname：必填，定义动画的名称
keyframes-selector：必填项，动画时长比例在0%到100%之间，也可以使用and to关键字形式设置，form表示0%，to表示100%
例子：
@keyframes abc {
from{transform: rotate(0)}
50%{transform:rotate(90deg)}
to{transform: rotate(360deg)}
}
动画属性
1.动画名称属性
设置应用于对象的动画的名称
句型：
动画名称：关键帧名称|无
参数说明：
keyframename：指定要绑定到选择器的关键帧的动画名称
2.animation-duration属性
定义：设置对象动画的持续时间
句子模式：动画持续时间：时间
参数说明：指定完成对象播放所需的时间，默认值为0
3.animation-timing-function属性
定义：设置物体动画的过渡类型
参数说明：与transition-timing-function属性的参数相同
4.动画延迟属性
定义：设置动画的延迟时间
句子模式：animation-delay: time
参数说明：可选值，定义动画开始前的等待时间，以秒或微秒计算，默认值为0
5.动画迭代计数属性
定义：设置对象动画的循环次数
句子模式：动画迭代计数：无限|数量
参数说明：
number 是一个数字，默认值为1
无限：无限次循环
6.animation-direction属性
定义：设置物体的动画是否反向移动
句型：
动画方向：正常、反向、交替、交替反向
参数说明：
法线：法线方向
反向：反向运动
alternate：先正向运动，后反向运动，继续交替运行，需要与循环属性配合使用
alternate-reverse：先反向运动，再正常运动，继续交替运行，需要与cycle属性配合使用
7. 动画播放状态属性
定义：指定对象是正在运行还是已暂停
句型：动画播放状态：暂停|运行
参数说明：
暂停：指定暂停动画
running：默认值，建议运行动画
示例：将键盘连接到盒子以暂停动画
#box:hover{
animation-play-state: paused;
}
8. 动画填充模式
设置动画结束后的状态
none：默认值。不设置动画以外的对象状态，DOM不是动画前的状态
forwards：设置对象的状态为动画结束时的状态，100%或者to，当animation-direction设置为reverse时，会显示为动画结束后关键帧的第一帧
backs：将对象的状态设置为动画开始时的状态，（测试表明DOM不是动画前的状态）
Both：将对象的状态设置为动画的结束或开始状态，结束时的状态优先
9.animation复合属性（不推荐）
句型：
动画：namedurationtiming-functiondelayinteration-countdirectionplay-state
注意：在css3上，给元素设置圆角、阴影、变换等属性时，虽然外观位置发生变化，但元素本身的大小和位置保持不变
