屬性選擇器 包括h5中新增的自定義屬性

     
sasas

屬性選擇器可以指定屬性值 的樣式變化
E[attr="value"] 指定屬性名

     
sasas1
     
sasas2
     
sasas3

只有第一行才會(huì)變?yōu)榧t色
E[attr~="value"] 屬性對(duì)應(yīng)的值是許多個(gè)值 其中包括這個(gè)value
E[attr^="value"] 屬性對(duì)應(yīng)的值是以value開頭的 一個(gè)值
E[attr$="value"] 屬性對(duì)應(yīng)的值是以value結(jié)束的 一個(gè)值
E[attr*="value"] 屬性對(duì)應(yīng)的值中包含value字符串包含字母 一個(gè)值
E[attr|="value"] 屬性值是以 value- 開始的
結(jié)構(gòu)選擇器
p:nth-child(1|odd（2n）|even(2n-1)) 作為第一個(gè)孩子的p會(huì)被選擇到
p:nth-last-child(1|odd（2n）|even(2n-1)) 作為倒數(shù)第幾個(gè)孩子的p節(jié)點(diǎn)
p:nth-of-type(1|odd（2n）|even(2n-1)) 找到父級(jí)下的第二個(gè)p標(biāo)簽
p:nth-last-of-type(1|odd（2n）|even(2n-1)) 找到父級(jí)下的倒數(shù)第二個(gè)p標(biāo)簽
p:first-child ==p:nth-child(1)
p:last-child ==p:nth-last-child(1)
P:first-of-type==p:nth-of-type(1)
p:empty 表示元素中沒(méi)有子節(jié)點(diǎn)
p:only-of-type 表示p的父元素中只有一個(gè)子節(jié)點(diǎn) 且這個(gè)唯一的子節(jié)點(diǎn)的必須是p
p:only-child 表示p的父元素中只有一個(gè)子節(jié)點(diǎn) 且這個(gè)唯一的子節(jié)點(diǎn)的必須是p

css3中新增加的偽類
URL 帶有后面跟有錨名稱 #，指向文檔內(nèi)某個(gè)具體的元素。這個(gè)被鏈接的元素就是目標(biāo)元素(target element)。
:target 選擇器可用于選取當(dāng)前活動(dòng)的目標(biāo)元素。
url#value
div:target 會(huì)選擇到id為target的div
表單新增的偽類
input:disabled{} 會(huì)選擇到不能編輯的輸入框
input:enabled{} 會(huì)選擇到能編輯的輸入框
input:checked{} 會(huì)選擇到當(dāng)前選中的復(fù)選框
css3新增的兄弟選擇器
E~F 選擇到的是E元素后邊的所有兄弟節(jié)點(diǎn)
E+F 選擇到的是E后邊的第一個(gè)兄弟節(jié)點(diǎn)
實(shí)現(xiàn)模擬單選框

文本新增選擇器
p:first-line 選擇到文本的第一行
p:first-letter 選擇到文本的第一個(gè)文字
p::selection 文本被鼠標(biāo)選中的時(shí)候的樣式 注意到時(shí)雙冒號(hào)

    p::selection{
      color: red;background: green;
    }


   

       的囧事就打死的大世界第三
   

p:after {content:"添加的內(nèi)容" 樣式}
E:not(F) 選擇到不是F的E
h1:not(.h2) 選擇到類不是h2的h2標(biāo)簽

1、rgba顏色模式 紅綠藍(lán)透明度(0-1) 背景透明 文字不會(huì)透明
2、文字陰影 text-shadow: 0 0 10px red; / x y 模糊程度 陰影顏色/
text-shadow: 第一組陰影,第二組陰影;
3、文字描邊 webkit內(nèi)核瀏覽器才會(huì)支持
-webkit-text-stroke:3px寬度

父元素屬性 ：
1、display: -webkit-box;
2、內(nèi)部項(xiàng)目的布局方向 -webkit-box-orient: vertical; 默認(rèn)是橫向顯示的
3、內(nèi)部項(xiàng)目的元素排列 -webkit-box-direction: reverse; 實(shí)現(xiàn)元素顛倒
4、水平方向上對(duì)項(xiàng)目沒(méi)有占滿的富?？臻g的管理 -webkit-box-pack: end 富?？臻g在左側(cè)顯示
這就可以輕松的實(shí)現(xiàn)水平居中了：-webkit-box-pack: center
把富裕空間清軍分配給每一個(gè)元素：-webkit-box-pack: justify
5、垂直方向上對(duì)項(xiàng)目沒(méi)有占滿的富裕空間的管理 -webkit-box-align:center ;
這就可以輕松的實(shí)現(xiàn)垂直居中了：-webkit-box-align: center
內(nèi)部項(xiàng)目的屬性：
1、希望元素顯示的位置：-webkit-box-ordinal-group：2
希望他顯示在第幾個(gè)

.box div:nth-of-type(1){
        -webkit-box-ordinal-group: 2;
    }

2、彈性空間管理
-webkit-box-flex:1 -webkit-box-flex:5
假設(shè)有兩個(gè)元素 第一個(gè)占1/3的父元素的寬度 第二個(gè)占2/3的父元素的寬度

box-shadow: 10px 10px 30px blue; //x偏移 y偏移 模糊程度 陰影顏色
box-shadow: inset 10px 10px 30px blue; //投影方式 x偏移 y偏移 模糊程度 陰影顏色
做邊框的一個(gè)新方法 利用陰影來(lái)做 同時(shí)陰影可以疊加 一個(gè)box上邊可以增加多個(gè)陰影

-webkit-box-reflect: below|left|right|top 倒影和元素之間的距離

background: -webkit-linear-gradient(red 0,blue 100%);
紅色在開始 藍(lán)色在結(jié)束 的一個(gè)漸變

但是這個(gè)屬性必須結(jié)合overflow: auto;來(lái)實(shí)現(xiàn)拖拽放大

box-sizing:content-box 標(biāo)準(zhǔn)盒模型 默認(rèn)的
內(nèi)容寬度=width
可視寬度=width+padding+border
box-sizing:border-box 怪異盒模型
可視寬度=原來(lái)的width 所以如果他有padding 此時(shí)再設(shè)置這個(gè)屬性 就會(huì)導(dǎo)致子元素就會(huì)被減小

分欄布局 針對(duì)許多文字 一定要加上webkit前綴
-webkit-column-width: 250px; 每一欄有多寬
-webkit-column-count: 4; 告訴瀏覽器有多少欄 瀏覽器自動(dòng)算每一欄有多寬
-webkit-column-gap:10px 欄目之間多少px
-webkit-column-rule:1px solid red 欄目的分割線的樣式

當(dāng)設(shè)備的寬度在800px以上來(lái)引用的

當(dāng)設(shè)備的寬度在400到800之間 來(lái)引用的

當(dāng)設(shè)備的寬度在400以下的時(shí)候 來(lái)引用的

設(shè)備豎屏的情況下會(huì)加載這個(gè)css

設(shè)備橫屏的情況下會(huì)加載這個(gè)css

border-radius:10px;
兩個(gè)值：左上 右上 左下 右下
三個(gè)值：左上 右上左下 右下
實(shí)現(xiàn)畫橢圓 border-radius: 100px/150px; x軸的半徑/y軸的半徑

第一個(gè)參數(shù) url 使用的圖片
第二個(gè)參數(shù) 切割圖片 對(duì)背景的切割 上下 左右 再分配到邊框（固定的寬度）上做背景 不加px
第三個(gè)參數(shù) 圖片的排列方式 round stretch

背景和 div的邊框圖片的屬性值 都可以是線性漸變
-webkit-linear-gradient(起點(diǎn) 終點(diǎn) 起點(diǎn)的顏色 終點(diǎn)的顏色)
-webkit-linear-gradient(角度 起點(diǎn)的顏色 第二個(gè)新起點(diǎn)的顏色) 逆時(shí)針旋轉(zhuǎn)的角度 默認(rèn)是從左向右
-webkit-linear-gradient(角度 起點(diǎn)的顏色 起點(diǎn)的位置 終點(diǎn)的顏色 終點(diǎn)的位置)
改變某個(gè)位置的顏色 直接再在這個(gè)位置上寫一個(gè)顏色
實(shí)現(xiàn)鼠標(biāo)放上去 進(jìn)度條滾動(dòng)的效果

    
sasa

使用 background 的時(shí)候 設(shè)置多個(gè)背景的時(shí)候 先設(shè)置的在上邊 后設(shè)置的在下邊

起點(diǎn)的位置 left top ,right top ,100px 100px 表示的是圓心的位置
參數(shù)2 圓的半徑
參數(shù)3 形狀的設(shè)置

    
sasa

屬性值的關(guān)鍵字
cover 用背景圖片（等比放大）鋪滿 可能導(dǎo)致圖片的寬或者高消失一部分
container 將圖片（等比縮?。亩旁赿iv 里邊 但是可能會(huì)會(huì)出現(xiàn) 背景沒(méi)有覆蓋到的地方

padding-box 默認(rèn)的屬性值 原點(diǎn)就是padding的左上角
border-box 原點(diǎn)就是div的邊框的左上角
content 原點(diǎn)就是div的內(nèi)容的左上角

border-box 默認(rèn)值 會(huì)從邊框部分開始顯示北京圖片
padding-box 從padding區(qū)開始顯示背景區(qū)
content-box 從內(nèi)容區(qū)開始顯示背景區(qū)

自定義字體 使用方法

@font-face    //關(guān)鍵字  
{
font-family: myFirstFont;            //定義的字體的名字  
src: url("Sansation_Light.ttf"),     //定義字體的來(lái)源 
     url("Sansation_Light.eot"); /* IE9 */     //兼容IE9
}  

這樣就可以使用網(wǎng)上現(xiàn)在有的字體庫(kù) 從而是實(shí)現(xiàn)新的定義的字體