目录
CSS3选择器
新增基本选择器
子元素选择器
概念
子元素选择器只能选择某元素的子元素
注意：是直接后代，不是间接后代
语法格式
父元素 > 子元素（father > child）
兼容性
IE8+、Firefox、Chrome、Safari、Opera
相邻兄弟元素选择器
概念
相邻兄弟选择器可以选择紧接在另一个元素后的元素，而且他们具有一个相同的父元素
语法格式
元素 + 兄弟相邻元素（element + sibling）
兼容性
IE8+、Firefox、Chrome、Safari、Opera
通用兄弟选择器
概念
选择某元素后面的所有兄弟元素，而且他们具有一个相同的父元素
语法格式
元素 ~ 后面所有兄弟相邻元素（element ~ siblings）
兼容性
IE8+、Firefox、Chrome、Safari、Opera
群组选择器
概念
群组选择器是将具有相同样式的元素分组在一起，每个选择器之间使用逗号“ , ”隔开
语法格式
元素1 , 元素2 , ... , 元素n（element1 , element2 , ... , elementn）
兼容性
IE8+、Firefox、Chrome、Safari、Opera
属性选择器 element[attribute]
概念
选择所有带有attribute属性的元素
兼容性
IE8+、Firefox、Chrome、Safari、Opera
举例
element[attribute="value"] 选择所有使用attribute="value"的元素
element[attribute~="value"] 选择所有attribute属性包含单词"value"的元素（注意是用空格隔开的单词）
element[attribute^="value"] 选择所有attribute属性以"value"开头的元素
element[attribute$="value"] 选择所有attribute属性以"value"结尾的元素
element[attribute*="value"] 选择所有attribute属性包含"value"的元素
element[attribute|="value"] 选择所有attribute属性为"value"或以"value-"开头的元素
伪类选择器（权值为10）
动态伪类
这些伪类并不存在于HTML中，只有当用户和网站交互的时候才能体现出来
锚点伪类
:link、:visited
用户行为伪类
:hover、:active、:focus
UI元素状态伪类
概念
我们把":enabled"、":disabled"、":checked"伪类称为UI元素状态伪类
兼容性
IE9+、Firefox、Chrome、Safari、Opera
CSS3结构类
我们把CSS3的:nth选择器也成为CSS3结构类
element:fitst-child
选择属于其父元素的首个子元素的每个element元素
elment:last-child
选择属于其父元素的最后一个子元素的element元素
element:nth-child()
选择器匹配属于其父元素的第N个子元素，无论元素的类型（计数时不看类型，但显示时还是要看类型的）
说明：参数可以取number（某个具体值）、带n的表达式（n从0开始，依次取0,1,2……）、odd（第奇数个）、even（第偶数个）
element:nth-last-child()
选择器匹配属于其父元素的倒数第N个子元素，无论元素的类型（计数时不看类型，但显示时还是要看类型的）
element:nth-of-type()
选择器匹配属于父元素的特定类型的第N个子元素的每个元素（从符合的标签中数出第N个）
element:nth-last-of-type()
选择器匹配属于父元素的特定类型的倒数第N个子元素的每个元素（从符合的标签中数出倒数第N个）
element:first-of-type
选择器匹配属于其父元素特定类型的首个子元素的每个元素
element:last-of-type
选择器匹配属于其父元素特定类型的最后一个子元素的每个元素
element:only-child
选择器匹配属于其父元素的唯一子元素的每个元素（元素必须是其父元素的唯一子元素才符合，也就是指向自己）
element:only-of-type
选择器匹配属于其父元素的特定类型的唯一子元素的每个元素（可以有其他类型的元素，但该类型的元素只能有一个）
element:empty
选择器匹配没有子元素（包括文本节点，即标签内没有文字）的每个元素
否定选择器
:not（element / selector）
选择器匹配非指定元素 / 选择器的每个元素
语法格式
父元素:not（子元素 / 子选择器）
兼容性
IE9+、Firefox、Chrome、Safari、Opera
伪元素（权值为1）
element::first-line
概念
根据"first-line"伪元素中的样式对element元素的第一行文本进行格式化
说明
"first-line"伪元素只能用于块级元素
element::first-letter
概念
用于向文本的首字母设置特殊样式
说明
"first-letter"伪元素只能用于块级元素
element::before
概念
在元素的内容前面插入新内容
说明
- 是其元素的父元素的第一个子元素
- 是行级元素
- 常用"content"配合使用，内容通过content写入
- 标签中找不到对应的标签
element::after
概念
在元素的内容后面插入新内容
说明
- 是其元素的父元素的最后一个子元素
- 是行级元素
- 常用"content"配合使用，内容通过content写入，多用于清除浮动
- 标签中找不到对应的标签
div::after{
display:block;
content:""; /*这句不写不行，如果不写还是无法撑开父元素*/
clear:both;
}element::selection
概念
用于设置在浏览器中选中文本后的背景色与前景色（即光标选中区域的效果）
兼容性说明
selection在IE家族中，只有IE9+版本支持，在firefox中需要加上其前缀“-moz”
CSS3边框与圆角
border-radius属性
一个最多可指定四个 border -*- radius 属性的复合属性，这个属性允许你为元素添加圆角边框
语法
border-radius: 1-4 length|% / 1-4 length|%
多值
- 四个值：分别是左上角、右上角、右下角、左下角（顺时针）
- 三个值：分别是左上角、右上角和左下角、右下角
- 两个值：分别是左上角与右下角，右上角与左下角
- 一个值：四个圆角值相同
兼容性
IE9+、Firefox4+、Chrome、Safari5+、Opera
说明：
- 单位不仅可以是px，还可以是em、vw、rem等。
- 用%时，是相对容器本身宽高而言的，会出现圆角不圆的效果。取值为50%时，会变成椭圆。
- 可以用border-radius-top(bottom)-left(right)来单独设置
box-shadow属性
可以设置一个或多个下拉阴影的框
语法
box-shadow-
h-shadow：水平阴影，正值往右
v-shadow：垂直阴影，正值往下
blur：模糊
spread：往四周扩展
color：颜色
inset：内外阴影
border-image属性
使用border-image-*属性来构建美丽的可扩展按钮
语法
border-image-
source：指定要使用的图像，取值可以是 none | image路径
slice：指定图像的边界向内偏移，取值可以是 number | % | fill （百分比越大，图片越小）
说明：fill为可选属性值，假如指定，name中间第九块不是透明块，假如不指定，那么为透明图片处理
width：指定图像边界的宽度，取值可以是 number | % | auto
outset：指定在边框外部绘制 border-image-area的量，取值可以是length | number
repeat：图像边界是否重复（repeat）、拉伸（stretch）或铺满（round）
兼容性
IE不兼容、Firefox、Chrome、safari6+、Opera不兼容
CSS3背景与渐变
CSS3背景图像区域
CSS3背景图像定位
设置背景是相对于内边距、边框还是内容框来定位
CSS3背景图像大小
- 说明：
- percentage 表示占父元素的比例，如果只写其中一个百分比，另一个为auto，就会按比例进行缩放。如果两个都写，就按设置值大小显示图片。
- cover 将背景图片等比缩放以填满整个容器，多余部分溢出（背景图片很大时），可以用定位调整背景显示区域，默认情况下从左上角开始显示。—— 以宽、高较小者为准
- contain 将背景图片等比缩放至某一边紧贴容器边缘为止，也就是要么填满宽，要么填满高，另一侧填不满就留白。—— 以宽高较大者为准
CSS3多重背景图像
CSS3允许为元素使用多个背景图像
语法
background-image: url(1.jpg) , url(2.jpg);
注意：元素引用多个背景图片，前面图片依次覆盖后面的图
CSS3背景属性整合
建议：background 只写 color url repeat content-box(h) content-box(v) , background-size / background-oringin / background-clip / background-attachment 另外写，避免不兼容，有利于排除错误
CSS3渐变
CSS3线性渐变
注意：
- 第一个元素不设置百分比默认为0%，最后一个元素不设置百分比默认为100%。
- 百分比意思是从容器的某个位置到某个位置实现两个颜色的过渡，而这个位置用百分比来定位。
注意：百分比不满100%的不会自动填充剩余的部分，而是不断重复同一样式的渐变 。
CSS3径向渐变
注意：关键字和形状要写在同一个参数中，用空格隔开。
CSS3文本与字体
CSS3文本阴影
text-shadow属性
说明：
- h-shadow：阴影的水平距离
- v-shadow：阴影的垂直距离
- blur：模糊程度
- color：阴影颜色
CSS3换行
word-break属性
说明：
- normal：单词放不下了，换到下一行。在中文显示中，若文档流中最后一行只有一个标点符号，就会和它前面的字符一起排到实际显示的最后一行。
- break-all：单词放不下了，把字符断开
- keep-all：单词放不下了，换到下一行，有连字符就从连字符断开。在中文显示中，从文档流中离换行处最近的标点符号处换行。
word-wrap属性
说明：
- normal：即使单词很长，没有遇到空格也不会断开，会直接溢出
- break-word：把单词断开以防止溢出现象
CSS3新文本属性
text-align-last属性
说明：
- left：左对齐
- right：右对齐
- center：水平居中
- justify：两端对齐
- start：主流文本左对齐则最后一行左对齐
- end：主流文本左对齐则最后一行右对齐
text-overflow属性
说明：
- clip：溢出部分直接减掉
- eliipsis：溢出部分用省略号表示
- string：溢出部分用自己写的"string"来表示
CSS3 @font-face的语法规则
先把字体文件放入服务器，网页加载时自动下载服务器中的字体文件到客户本地，从而在用户的电脑上也能显示出所需的字体。
CSS3 @font-face的取值说明
注意：source 建议使用相对路径。
CSS3 @font-face的字体格式
说明：svg 其实是以图片的形式渲染出字体的样式
CSS3 @font-face的字体应用
说明：
- font-family在本地自带的字体库中找不到myFont，就会到src指定的url中，自上而下去寻找一个可以兼容的字体格式
- 最好新建一个font文件夹，把字体都放在这个文件夹下，相对路径就写为：url('font/myFont.ttf')
CSS3 获取特殊字体
Fontsquirrel
http://www.fontsquirrel.com/tools/webfont-generator
- 从本地上传字体myFont（自行定义）
- Agreement 中点击Yes，点击上面的EXPERT
- 勾选Font Formats 中的.tt .woff .eot（通常为了网页运行快，选压缩版本） .svg
- 点击download your kit
- 到所在文件夹打开生成的css文件
- 复制粘贴到css文件中
- 到所在文件夹把生成的字体文件放到font目录下，并把名称改为我们自己命名的myFont（自行定义）
CSS3转换
CSS3 Transform
说明：[<transform-function>]* 意思是后面还可以加无数个函数
CSS3 2D转换
CSS3 rotate() 旋转
说明：
- 角度以deg为单位
- 旋转一定要有一个旋转中心，所以必须先用transform-origin来确定旋转中心，若缺省，默认transform-origin:50% 50%
/*为了兼容各种浏览器*/
-webkit-transform:rotate(7deg);
-moz-transform:rotate(7deg);
-ms-transform:rotate(7deg);
-o-transform:rotate(7deg);
transform:rotate(7deg);CSS3 translate() 平移
说明：
- translate的单位可以是px、em、rem、vw、% ，x轴取正值向右偏移，y轴取正值向上偏移。
- translate(x,y)第一个参数不能缺省，第二个参数可以，不写时默认为0
CSS3 scale() 缩放
说明：
- 缩放的标准线在父容器的垂直中线、水平中线或中点上，而不在左上角 。
- scale()的第一个参数不能缺省，第二个参数可以，不写时默认和第一个参数一样
- scale的参数是以1为基准的缩放矢量参数，不需要单位，也不能用分数和百分比
CSS3 skew() 扭曲或斜切
说明：角度为正，逆时针转动，以中线为旋转中心。 与rotate不同，rotate角度为正顺时针转动，以本元素中点为旋转中心
skew(x,y)第一个参数不可缺少，第二个参数可以，不写时默认为0。
CSS3 3D转换
CSS3 rotate3d()
说明：角度0~90°，元素被逐渐压缩，角度90°~180°，元素倒置并逐渐变大。
说明：以中点为旋转中心旋转
说明：
- rotate3d(x,y,z,angle)是三种效果叠加的效果。
- 前三个参数中，取值为1意为该方向顺时针旋转，0为该方向不旋转，-1位该方向顺时针旋转。
CSS3 translate3d()
说明：多用于遮罩
说明：x轴参数指明距离左上角水平平移距离，y轴参数指明距离左上角垂直平移距离，z轴参数指明距离人眼前后平移距离
CSS3 scale3d()
说明：scaleZ是厚度的变化
CSS3 perspective3d()
CSS3 Transform与坐标系统
CSS3 矩阵
说明：
- [x y 1] 若不写，默认为 [0 0 1]
- ax+cy+e为变换后的水平坐标，bx+dy+f表示变换后的垂直位置。
CSS3 扩展属性
transfor-style属性
perspective属性
说明：z＞0的部分比正常大，z＜0的部分比正常小
backface-visibility属性
说明：z＜0的部分不可见
CSS3过渡
说明：
- 从一种形态变到另一种形态，也就是CSS值发生变化
- CSS效率非常高，它发生的变化时瞬间变化，速度非常快
- 视觉发生变化时，前一秒的视觉会在人眼中停留0.1s，而CSS的变化时间绝对小于0.1s，如果1s中经历有24帧的变化，就可以认为它是瞬间直接变化的。
transition-property属性
transition-duration属性
transition-timing-function属性
说明：
- liner：匀速变化
- ease：先慢后快
- ease-in：先慢后很快
- ease-out：先很快后慢
- ease-in-out：先慢后快再慢
transition-delay属性
说明：duration 是开始变化到变化完成经历的时间，delay是开始变化之前等待的时间
<style type="text/css">
body { background: #abcdef; }
div { width: 800px; height: 800px; margin: auto; transform: rotate(0deg); background: url(images/imooc.png) no-repeat center center, url(images/circle_outer.png) no-repeat center center;
-webkit-transition-property: transform;
-moz-transition-property: transform;
-ms-transition-property: transform;
-o-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
-ms-transition-duration: 2s;
-o-transition-duration: 2s;
transition-duration: 2s;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-ms-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-delay: 1s;
-moz-transition-delay: 1s;
-ms-transition-delay: 1s;
-o-transition-delay: 1s;
transition-delay: 1s;
}
div:hover { cursor: pointer; transform: rotate(180deg);
-webkit-transition-property: transform;
-moz-transition-property: transform;
-ms-transition-property: transform;
-o-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
-ms-transition-duration: 2s;
-o-transition-duration: 2s;
transition-duration: 2s;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-ms-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-delay: 1s;
-moz-transition-delay: 1s;
-ms-transition-delay: 1s;
-o-transition-delay: 1s;
transition-delay: 1s;
}
</style>
注意：顺序一定不能错
CSS3动画
CSS3 动画
CSS3 animation
animation-name属性
animation-duration属性
animation-timing-function属性
animation-delay属性
建议：CSS中小数点前的0都可以省略掉，如 0.5 用 .5 表示
animation-iteration-count属性
注意：delay的时间不算在每一次动画循环播放时间之内，它是变化过程之外等待的时间。
注意：alternate和alternate-reverse必须配合循环属性使用
animation-fill-mode属性
注意：当循环次数为infinity时，显示不出我们设置的效果
animation-play-state属性
animation属性
说明：
- animation 属性中 name 和 duration 是必须的，其余属性可缺省，如果只有一个时间参数，默认是duration的参数
- duration参数如果不设置则默认为0，动画不会播放
<style type="text/css">
body { background: #abcdef; }
div { position: relative; width: 760px; height: 760px; margin: auto;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
div > div { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; background-repeat: no-repeat; background-position: center; }
div > .inner { background-image: url(images/circle_inner.png);
-webkit-animation: circle_inner linear 10s infinite;
animation: circle_inner linear 10s infinite;
}
div > .middle { background-image: url(images/circle_middle.png);
-webkit-animation: circle_middle linear 10s infinite;
animation: circle_middle linear 10s infinite;
}
div > .outer { background-image: url(images/circle_outer.png);
-webkit-animation: circle_outer linear 10s infinite;
animation: circle_outer linear 10s infinite;
}
div > .imooc { background-image: url(images/imooc.png); }
@keyframes circle_inner {
from { transform: rotateX(0deg); }
to { transform: rotateX(360deg); }
}
@keyframes circle_middle {
from { transform: rotateY(0deg); }
to { transform: rotateY(360deg); }
}
@keyframes circle_outer {
from { transform: rotateZ(0deg); }
to { transform: rotateZ(360deg); }
}
</style>CSS3 @keyframes
<style type="text/css">
body { background: #abcdef; }
div { position: relative; width: 760px; height: 760px; margin: auto;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
div > div { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; background-repeat: no-repeat; background-position: center; }
div > .inner { background-image: url(images/circle_inner.png);
-webkit-animation: circle_inner linear 10s infinite;
animation: circle_inner linear 10s infinite;
}
div > .middle { background-image: url(images/circle_middle.png);
-webkit-animation: circle_middle linear 10s infinite;
animation: circle_middle linear 10s infinite;
}
div > .outer { background-image: url(images/circle_outer.png);
-webkit-animation: circle_outer linear 10s infinite;
animation: circle_outer linear 10s infinite;
}
div > .imooc { background-image: url(images/imooc.png); }
@-webkit-keyframes circle_inner {
form { transform: rotateX(0deg); }
25% { transform: rotateX(45deg); }
75% { transform: rotateX(315deg); }
to { transform: rotateX(360deg); }
}
@keyframes circle_inner {
form { transform: rotateX(0deg); }
25% { transform: rotateX(45deg); }
75% { transform: rotateX(315deg); }
to { transform: rotateX(360deg); }
}
@-webkit-keyframes circle_middle {
form { transform: rotateY(0deg); }
25% { transform: rotateY(45deg); }
75% { transform: rotateY(315deg); }
to { transform: rotateY(360deg); }
}
@keyframes circle_middle {
form { transform: rotateY(0deg); }
25% { transform: rotateY(45deg); }
75% { transform: rotateY(315deg); }
to { transform: rotateY(360deg); }
}
@-webkit-keyframes circle_outer {
form { transform: rotateZ(0deg); }
25% { transform: rotateZ(45deg); }
75% { transform: rotateZ(315deg); }
to { transform: rotateZ(360deg); }
}
@keyframes circle_outer {
form { transform: rotateZ(0deg); }
25% { transform: rotateZ(45deg); }
75% { transform: rotateZ(315deg); }
to { transform: rotateZ(360deg); }
}
</style>CSS3 will-change
提高渲染速度的方法
will-change属性
说明：推荐使用<custom-ident>
注意：勿滥用will-change、使用时提前申明、remove
<style type="text/css">
body { background: #abcdef; }
div { position: relative; width: 760px; height: 760px; margin: auto;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
div > div { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; background-repeat: no-repeat; background-position: center;
-webkit-transition: transform 10s ease;
-moz-transition: transform 10s ease;
-ms-transition: transform 10s ease;
-o-transition: transform 10s ease;
transition: transform 10s ease;
-webkit-will-change: transform;
-moz-will-change: transform;
will-change: transform;
}
div > .inner { background-image: url(images/circle_inner.png); transform: rotateX(0deg); }
div > .middle { background-image: url(images/circle_middle.png); transform: rotateY(0deg); }
div > .outer { background-image: url(images/circle_outer.png); transform: rotateZ(0deg); }
div > .imooc { background-image: url(images/imooc.png); }
div:hover > .inner { transform: rotateX(360deg); }
div:hover > .middle { transform: rotateY(360deg); }
div:hover > .outer { transform: rotateZ(360deg); }
</style>