一、CSS 選擇符：

    1.id選擇器(# myid)

    2.類選擇器(.myclassname) ；

    3.標籤選擇器(div, h1, p) ；

    4.相鄰選擇器(h1 + p) ；

    5.子選擇器(ul > li) ；

    6.後代選擇器(li a) ；

    7.萬用字元選擇器

( * ) ；

    8.屬性選擇器(a[rel = “external”]) ；

    9.偽類選擇器(a: hover, li:nth-child)；

    10.CSS3新增偽類選擇器

        p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每個 <p> 元素；

        p:last-of-type  選擇屬於其父元素的最後

<p> 元素的每個 <p> 元素；

        p:only-of-type  選擇屬於其父元素唯一的 <p> 元素的每個 <p> 元素；

        p:only-child    選擇屬於其父元素的唯一子元素的每個 <p> 元素；

        p:nth-child(2)  選擇屬於其父元素的第二個子元素的每個

<p> 元素；

        :enabled :disabled  控制表單控制元件的禁用狀態；

        :checked        單選框或複選框被選中。

二、樣式的繼承

    1、可繼承的屬性

        1)、字體系列屬性

            font：組合字型；

            font-family：規定元素的字體系列；

            font-weight：設定字型的粗細；

            font-size：設定字型的尺寸；

            font-style：定義字型的風格；

            font-stretch：對當前的 font-family 進行伸縮變形。所有主流瀏覽器都不支援；

            font-size-adjust：為某個元素規定一個 aspect 值，這樣就可以保持首選字型的 x-height。

        2)、文本系列屬性

            text-indent：文字縮排；

            text-align：文字水平對齊；

            line-height：行高；

            word-spacing：增加或減少單詞間的空白（即字間隔）；

            letter-spacing：增加或減少字元間的空白（字元間距）；

            text-transform：控制文字大小寫；

            direction：規定文字的書寫方向；

            color：文字顏色。

        3)、元素可見性：visibility；；

        4)、表格佈局屬性：caption-side、border-collapse、border-spacing、empty-cells、table-layout；

        5)、列表佈局屬性：list-style-type、list-style-image、list-style-position、list-style；

        6)、生成內容屬性：quotes；

        7)、游標屬性：cursor；

        8)、頁面樣式屬性：page、page-break-inside、windows、orphans；

    2、不可繼承的樣式：

        1)、display：規定元素應該生成的框的型別；

        2)、文字屬性

                vertical-align：垂直文字對齊；

                text-decoration：規定新增到文字的裝飾；

                text-shadow：文字陰影效果；

                white-space：空白符的處理；

                unicode-bidi：設定文字的方向。

        3)、盒子模型的屬性：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-styl        e、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-rig    ht-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、    border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bo    ttom、padding-left；

       4)、背景屬性：background、background-color、background-image、background-repeat、background-position、background-    attachment；

       5)、定位屬性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、    clip、z-index；

        6)、生成內容屬性：content、counter-reset、counter-increment；

        7)、輪廓樣式屬性：outline-style、outline-width、outline-color、outline；

        8)、頁面樣式屬性：size、page-break-before、page-break-after；

        9)、聲音樣式屬性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during。

三、優先順序演算法：

     1.優先順序就近原則，同權重情況下樣式定義最近者為準；

     2.載入樣式以最後載入的定位為準；

     3.!important > id > class > tag ；

     4.important 比內聯優先順序高，但內聯比 id 要高。

*注：直接數就行（只要選擇同一個元素，優先順序div.box > .box）

四、CSS3新增樣式

1. CSS3實現圓角（border-radius），陰影（box-shadow）；
2. 對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）；
3. transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋轉,縮放,定位,傾斜；
4. 增加了更多的CSS選擇器 多背景 rgba；
5. 在CSS3中唯一引入的偽元素是 ::selection.
6. 媒體查詢，多欄佈局；
7. border-image。

五、display的樣式

    有很多：none | inline | block | inline-block | list-item | run-in | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-colume-group | table-column | table-cell | table-caption | inherit

下面只列舉些常用的值。

inline（預設值）
1.內容撐開寬度。 
2.對它進行設定寬高度是無效的。 
3.不單獨佔一行，其他元素會緊跟其後。 
4.如果對inline元素設定float及position：absolute/fixed，會發現元素被“塊”化，可以對其設定寬高了。

block 
1.可以設定寬高。 
2.單獨佔一行。 

3.寬度不設定的話，寬度為父元素的寬度。

inline-block 
可以理解為既有inline的同行特性也有block的寬高特性。可以想想一般的button、input是什麼樣子的。 
1.不單獨佔一行。 
2.可以設定寬高。

none 
1.隱藏元素並脫離文件流。 
2.和visibility的區別就在於，visibility：hidden還會保留元素本該顯示的空間。但none不會。

inherit 
繼承父元素的display屬性的值。

table 
也是一個“塊”，但和block相比，它具有包裹性。

六、position區別

1.absolute 生成絕對定位的元素，absolute的”根元素“是可以設定的，絕對定位的元素的位置相對於最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊。

2.fixed 生成絕對定位的元素，相對於瀏覽器視窗進行定位（老IE不支援）。

3.relative 生成相對定位的元素，相對於其在普通流中的位置進行定位。

4.static 預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right z-index 宣告）。

5.inherit 規定從父元素繼承 position 屬性的值。

持續更新中。。。