1.屬性選擇器 IE6以下不兼容
li[class] 有屬性
li[class=abc] 屬性和值是否相等 "abc"
li[class~=abc] 包含 "abc ab"
li[class^=abc] 首字母
li[class$=abc] 尾字母
li[class|=a] 以值開(kāi)頭的元素、后面是中劃線的
li[class=abc] 字符串中有值
2.偽類選擇器
*obj:nth-child(1) 選擇某一個(gè)
obj:nth-child(odd) 奇數(shù)
obj:nth-child(even) 偶數(shù)
obj:nth-child(n) 全部
obj:nth-child(2n) 幾倍數(shù)
obj:nth-last-child(2) 從后往前數(shù)
obj:first-child 第一個(gè)
obj:last-child 最后一個(gè)
input:focus 獲取焦點(diǎn)
p:only-child 父級(jí)下只能存在一個(gè)元素
div:empty 空元素
input:enabled 可用
*input:disabled 不可用
::selection 選擇的文本樣式
*:root 根元素 html

*css3新增的樣式
1.圓角
border-radius 規(guī)律和margin類似（top看成left top）
50% 正圓 單位都可以用
一個(gè)值 四個(gè)方向
兩個(gè)值 左上/右下 右上/左下
三個(gè)值 左上 右上/左下 右下
四個(gè)值 左上 右上 右下 左下 順時(shí)針
2,過(guò)渡
transition:1s all ease;
1s 運(yùn)動(dòng)時(shí)間
all 運(yùn)動(dòng)樣式
ease 運(yùn)動(dòng)類型
3.瀏覽器規(guī)則
chrome 谷歌
-webkit-
firefox 火狐
-moz-
ie IE
-ms-
opera 歐朋
-o-
不加前綴 標(biāo)準(zhǔn)
4.文字陰影
text-shadow:1px 1px 2px #000;
x
y
模糊度
陰影顏色
顏色表示方法2
rgba(0,0,0,0.1)
r red
g green
b blue
a alpha
5.文字描邊
-webkit-text-stroke:2px red;
描邊寬度
描邊顏色
6.塊陰影
box-shadow:0px 0px 10px [10px] #000 [inset];
x
y
模糊度
擴(kuò)充陰影值
顏色
內(nèi)陰影
7.漸變
線性漸變
background:-webkit-linear-gradient(left,red,green)
left top right bottom /45deg 角度
red起始顏色
green結(jié)束顏色
重復(fù)漸變
background:-webkit-repeating-linear-gradient(-45deg,red 0,red 10%,blue 10%,blue 20%);
徑向漸變
background:-webkit-radial-gradient(red,green);

8.普通元素可編輯
            contenteditable="true"
9.蒙版
    -webkit-mask:url(../img/meizi.jpg) no-repeat x y;
10.背景圖大小
    background-size:width height;  px
        contain         以最小值為準(zhǔn)
        cover           以最大值為準(zhǔn)
11.多個(gè)背景圖
    background:url,url,url,url;
    12.背景圖生效位置
        background-origin:border-box;   邊框生效位置
        background-origin:content-box;  內(nèi)容生效位置
        background-origin:padding-box;  默認(rèn)位置
    13.文本開(kāi)切位置
        -webkit-background-clip:text;
        color:rgba(0,0,0,0);    配合使用
    14.倒影
        -webkit-box-reflect:below 10px -webkit-linear-gradient(rgba(0,0,0,0)       40%,rgba(0,0,0,1));
    below   向下
    above   向上
    left            向左
    right           向右
    10px    間距
    15.濾鏡
        -webkit-filter:blur(0px);
    16.縮放大小
        resize:both;
        resize:both; overflow:hidden;
    17.文本排序
        direction:rtl; unicode-bidi:bidi-override;
    18.變形
        transform:
    rotate      旋轉(zhuǎn)度數(shù)    deg
    translate(x,y)  平移像素    px
    scale(x,y)      縮放比例
    skew(x,y)       傾斜度數(shù)    deg
變形樣式是從后往前讀
transform:skew(30deg,10deg) scale(2,2) translate(100px,20px) rotate(45deg);
    19.旋轉(zhuǎn)控制中心點(diǎn)
transform-origin:x y;
    left
    right
    top
    bottom
    20px 20px
     景深：
transform:perspective(800px);
perspective:800px;
    3d  加給父級(jí)    不能繼承:
transform-style:preserver-3d;
    變形
transform:
    scale       X Y 
    rotate      X Y Z
    translate   X Y Z
    skew        X Y
    20.媒體查詢：
            @media (條件){語(yǔ)句}
        @media screen and (條件) {語(yǔ)句}
        @media screen and (條件) and (條件) {語(yǔ)句}
        <link href="" rel="stylesheet" media="(條件) and (條件)" />

判斷運(yùn)動(dòng)結(jié)束
transitionend
obj.addEventListener('transitionend',fn,false);
21.高級(jí)運(yùn)動(dòng)
自定動(dòng)畫(huà)
@keyframes test{
from{}
to{}
0%{}
100%{}
}
animation:test linear 1s infinite;
animation-duration:1s; 運(yùn)動(dòng)時(shí)間
animation-name:test; 名字
animation-timing-function:linear; 運(yùn)動(dòng)形式
animation-iteration-count:2; 運(yùn)動(dòng)次數(shù)
infinite 無(wú)限次數(shù)
animation-delay:2s; 延遲執(zhí)行
animation-play-state:paused; 暫停
22.彈性盒子
父級(jí)
display:flex;
子級(jí)
flex:1; 系數(shù)