CSS3选择器笔记
1.属性选择器：
[id=test] {…} 选择id=test字符串的元素
[id*=test] {…} 选择id存在test字符串的元素
[id^=test] {…} 选择id 以test字符串开头的元素
[id$=test] {…} 选择id以test结尾的元素
2.伪类选择器、伪元素：
p:first-line{…} 选择p元素中第一行的文字元素
p:first-letter{…} 选择p元素中的第一个文字元素
p:before{content:’…’} 选择p元素，在它之前插入一些内容
p:after{content:’…’} 选择p元素，在它之后插入一些内容
3.选择器root、not、empty、和target
:root{background: red;} 设置html文档的背景色
:not(p){…} 设置非p元素的背景色
:empty{…} 设置当元素内容为空时指定的样式
:target{…} 设置跳转到target元素的样式
4.选择器first-child、last-child、nth-child、和nth-last-child
li:first-child{…} 选择父元素中第一个子元素
li:last-child{…} 选择父元素中最后一个子元素
li:nth-child(2){…} 选择父元素第2个元素
li:nth-child(4n+4){…} 选择父元素第4的倍数
li:nth-last-child(2){…} 选择父元素倒数第2个元素
li:nth-child(add){…} 选择父元素中正数下来的奇数元素
li:nth-child(even){…} 选择父元素中正数下来的偶数元素
li:nth-last-child(add){…} 选择父元素中倒数上去的奇数元素
li:nth-last-child(even){…} 选择父元素中倒数上去的偶数元素
5.选择器nth-of-type、nth-last-of-type、和only-child
h2:nth-of-type(add){…} 选择针对同类型的子元素进行计算，选择正数下来的奇数元素
h2:nth-of-type(even){…} 选择针对同类型的子元素进行计算，选择倒数上去的偶数元素
li:only-child{…} 选择父元素中只有一个子元素的
6.UI元素状态伪类选择器 选择器e:hover、e:active、e:focue
a:hover{…} 选择当鼠标移入到某个元素上面使用的样式
a:active{…} 选择当鼠标按下某个元素并且没有松开时使用的样式
a:focue{…} 选择当某个元素获得光标焦点时候使用的样式
7.伪类选择器e:enabled、和e:disabled
e:enabled{…} 用来选择当前元素处于可用状态的样式
e:disabled{…} 用于选择当前元素处于不开用状态的样式
8.伪类选择器e:read-only、和e:read-write
e:read-only{…} 用来指定当元素处于只读状态的样式
e:read-write{…} 用来指定当元素处于非只读状态的样式
9.伪类选择器e:checked、e:default、和e:indeterminate、e::selection
e:checked{…} 用来指定当单选框或复选框处于选中状态的样式，火狐浏览器为-moz-checked
e:default{…} 用来指定当页面打开时默认处于选中状态时的样式，当用户改为非选中状态，样式依然存在
e:determinate{…} 用来指定当页面打开时，一组单选款中任何一个都没有选中时整组的样式，仅适用Opera
e::selection{…} 用来指定当元素处于指定状态时候的样式
10.通用兄弟元素选择器 e~e
div~p{…} 用来指定位于同一个父元素之中，某个元素之后的其他种类兄弟元素所使用的样式
11.文字和字体相关样式
text-shadow:5px 5px 5px red 给文字添加阴影效果
word-break:normal|keep-all|break-all 指定自动换行的处理方式
@font-face{font-family…;src:…} 使用特殊字体
12.浏览器前缀
-webkit- google内核前缀
-moz- 火狐浏览器内核前缀
-ms- IE浏览器内核前缀
-o- Opera（早期），Presto引擎，后改为Webkit引擎
13.盒子模型相关
box-shadow:5px 5px 5px red; 设置盒子阴影效果
14.背景和边框样式
background-clip:border|padding|content 设置背景的显示范围
background-origin:border|padding|content 设置背景图像的绘制起点
background-size:10px auto 设置背景图形的尺寸
background-image:url(…) 设置背景图形的图形
background-repeat:no-repeat|repeat-x|repeat-y 设置背景图形的平铺方式
background-position:x% y%|top left 设置背景图形的起始位置
border-radius 绘制圆角边框
border-image 使用图像边框
15.变形处理transform
transform:rotate(45deg) 顺时针旋转45度
transform:scale(0.5) 缩放50%
transform:skew(30deg,40deg) 水平倾斜30度，垂直倾斜30度
transform:translate(30deg,40deg) 水平反向移动30，水平方向移动40deg
transform-origin:left botton 修改变形的基准点为左下角
16.动画处理transition、animations
transition-property:background-color 指定背景颜色变化
transition-duration:1s 过度时间
tansition-timing-function:linear 过度动画
transition:background-color 1s linerar 指定背景色改变时候在1s中内平滑过度
@-webkit-keyframes mycolor 创建关键帕的样式
{
0%{background-color: red;}
40%{background-color: darkblue;}
70%{background-color: yellow; }
100%{background-color: red; }
}
-webkit-animation-name: mycolor; 指定背景色变化名称
-webkit-animation-duration: 5s; 指定变化时间
-webkit-animation-timing-function: linear; 指定变化方式
linear 动画从头到尾的速度是相同的
ease 默认，动画以低速开始，然后加快，在结束前变慢
ease-in 动画以低速开始
ease-out 动画以低速结束
ease-in-out 动画以低速开始和结束
-webkit-animation-iteration-count:infinite|n 规定动画无限次或n次播放
17.多栏布局和盒布局
column-count:n 元素内容被划分的列数
column-width:10px 设定栏的容宽度而不设置元素的宽度
column-gap:10px 设置多列间的间隔距离
column-rule:1px soid red 设置多列之间的线条间隔
