CSS3高级
复杂选择器：兄弟选择器、属性选择器、伪类选择器、伪元素选择器
兄弟选择器
相邻兄弟选择器（+）：选出指定元素紧邻的兄弟元素
通用兄弟选择器（~）：选出指定元素后面所有兄弟
属性选择器
拥有某种属性 ele[prop]
属性值等于：ele[prop="summary"]
属性值由空格隔开的单词列表包含指定ele[prop~="warning"]
属性值以en开头或en-开头的单词列表
ele[prop|="en"] p[language|="en"]
属性值包含con p[title*="con"]
属性值以rd结尾 p[title$="rd"]
属性值以f开头 p[title^="f"]
伪类选择器：状态伪类、链接伪类
目标伪类（:target）：可以选中作为链接锚点并被激活的元素
元素状态伪类：常用于表单控件元素
:enabled 启用状态
:disabled 禁用状态
:checked 选中状态（仅用于radio和checkbox）
结构伪类：
:first-child 匹配父元素中首个子元素
:last-child 匹配父元素中最后一个子元素
:empty 匹配没有子元素的元素（包括文本节点）
:only-child 元素是唯一的子元素（独生子）时被匹配
*以上选择器只有:empty是针对父元素的（没子元素），剩下都是针对子元素（是家中老几或独子）
否定伪类（:not(selector)）
伪元素选择器：
:first-letter 首字母
:first-line 首行
注意：first-line不会影响first-letter的样式
::selection 用户选取的部分
内容生成：在选中元素的前面或后面添加指定内容
:before
:after
配合content属性使用，可以指定图片、字符串和计数器
多列： 指定元素会被分割为多列
column-count 指定列数
column-gap 指定列之间间隔
column-rule 列之间分割线样式
注意：兼容性问题
IE10和Opera支持多列
Firefox需要前缀-moz-
Chrome和Sarari需要前缀-webkit-
重要内容
转换（transform）:旋转(rotate)、移动(translate)、缩放(scale)、倾斜（skew）
transform：none/transform-func
transform-origin:val1[ val2 val3]
val1代表x，val2代表y，val3代表z
val可以是百分比
val可以是top/bottom/right/left/center
2D转换
2D旋转（rotate）
rotate(deg) 允许负值
注意：转换中心受transform-origin影响
translate：
2D位移（translate）
translate(x[,y])
translate(x%[,y%])
translateX(x)或translateY(y)
2D缩放（scale）
scale(val),scale(x,y) 数值是大于零的数字
scaleX(x),scaleY(y)
2D倾斜（skew）
skew（deg1[,deg2]）
skewX(deg1),skewY(deg2)
3D转换（了解）
如果要使用3D必须加上perspective，且要加载作用元素的父容器上
该属性只影响3D转换元素
chrome和safari要使用兼容写法-webkit-perspective
3D位移
translateZ(z)
translate3d(x,y,z)
3D旋转
rotateZ(deg)
rotate3d(x,y,z,deg):x,y,z只能是1或者0,1表示影响响应的轴，0表示不影响
3D缩放
scaleZ(z)
scale3d(x,y,z)
过渡transition：使得CSS属性值在指定时间内平滑的过渡
四要素：过度属性-持续时间-过度函数-延迟时间
transition:background-color 2s[ linear1s]
拆分写法
过度属性transition-property
可选属性：颜色、取值为数值的、转换属性、渐变属性、visibility属性、阴影属性
该属性可以设置为"all"
过渡时间transition-duration:s|ms
过渡函数transition-timing-function
linear 线性
ease 默认值，慢速开始，快速变快，慢速结束
ease-in 慢速开始
ease-out 慢速结束
ease-in-out 慢速开始和结束，先加速后减速
过渡延迟transition-delay:s|ms
多属性过渡
transition-property:all;
transition-property:background,width...
transition:background 2s linear,width 2s ease,....
动画animation：可以通过定义关键帧制作逐帧动画效果
使用：
1. 声明动画@keyframes name
2. 为元素调用动画animation:name duration
animation:animation-name duration timing-function delay iteration-count direction;
依次为：动画名称 持续时间 过度函数 延迟 迭代次数 方向
拆分写法：
animation-name
animation-duration 持续时间
animation-timing-function 过渡函数
animation-delay 延迟
animation-iteration-count 迭代次数
取值数值或者infinite（无限循环）
animation-direction 动画方向
取值normal或alternate
animation-fill-mode:none/forwards/backwards/both
动画播完后元素保持状态
none恢复原始状态
forwards保持动画结束状态
backwards保持开始状态
both保持起始或结束状态
兼容性
animation收到IE10、Firefox、Opera支持
IE9及以前的浏览器不支持
Chrome和Safari需要加上-webkit-前缀
CSS3总结
网友评论