CSS選擇符 【通配選擇符】 *星號選擇器將匹配頁面里的每一個元素，但我建議你永遠不要再生產代碼中使用它。它給瀏覽器帶來大量不必要的負擔。 *{ margin:0; padding:0; } 【標簽選擇符】（也叫類型選擇符）：也就是把html標簽名作為選擇符 demo: ul {} 【id選擇符】： ...
CSS選擇符
【通配選擇符】 *星號選擇器將匹配頁面里的每一個元素，但我建議你永遠不要再生產代碼中使用它。它給瀏覽器帶來大量不必要的負擔。 *{ margin:0; padding:0; } 【標簽選擇符】（也叫類型選擇符）：也就是把html標簽名作為選擇符 demo: ul {} 【id選擇符】：應該慎重使用ID選擇器。 給所需樣式標簽自定義id名.然後在css文件內寫上#自定義id名{CSS樣式}.註意:每個id名都必須不同. #IDname {width: 960px; margin: auto; } id選擇符是唯一的，不允許重覆使用。如果可能的話，先嘗試使用一個標簽名稱，一個新的HTML5元素，甚至是一個偽類。 【類選擇符】(class) 自定義class名,使用方法:在css文件內寫上.class名{css樣式}. .className {border-color: blue; font-size:16px;} 註意:一個標簽可以用多個class名,一個class名可以供多個標簽使用。 id和class的區別 id選擇符,一個id名只能用一次，不得重覆。 getElementById('') class選擇符，一個class名可重覆使用，比如頁面中的多個元素，都可以使用同一個樣式定義。 【群組選擇符】：同時控制多個標簽。標簽名用,隔開 a,p,span{} 【組合選擇符】：我們還可以通過標簽名,id名,class名混搭的方式來選擇，添加樣式 div .p {} 表示div標簽下的所有class為p的標簽。 div,#a {} 表示id為a的標簽和所有的div標簽。 【關係選擇符】：關係選擇符可分為 選擇符 名稱 描述 版本 英文名 E F 包含選擇符 選擇所有被E元素包含的F元素。 CSS1 (Descendant combinator)這個也有叫後代選擇器的 E>F 子選擇符 選擇所有作為E元素的子元素F。 CSS2 (Child combinator) E+F 相鄰選擇符 選擇緊貼在E元素之後F元素。 CSS2 (Adjacent sibling combinator) E~F 兄弟選擇符 選擇E元素所有兄弟元素F。 CSS3 (General sibling combinator) 【偽類選擇符】 不是所有的標簽都能使用偽類選擇符,在此處我們只講a標簽的偽類選擇符a:link {color: #FF0000; text-decoration: none} //未訪問的鏈接
a:visited {color: #00FF00; text-decoration: none} //已訪問的鏈接
a:hover {color: #FF00FF; text-decoration: underline} //滑鼠在鏈接上
a:active {color: #0000FF; text-decoration: underline} //激活鏈接
✪註意：以上的偽類你可以寫1個或者寫多個。但是一定要按照順序寫，否則會出問題！
選擇符 版本 描述
E:link CSS1 設置超鏈接a在未被訪問前的樣式。
E:visited CSS1 設置超鏈接a在其鏈接地址已被訪問過時的樣式。
E:hover CSS1/2 設置元素在其滑鼠懸停時的樣式。
E:active CSS1/2 設置元素在被用戶激活(在滑鼠點擊與釋放之間發生的事件)時的樣式。
E:focus CSS1/2 設置元素在成為輸入焦點(該元素的onfocus事件發生)時的樣式。
E:lang(fr) CSS2 匹配使用特殊語言的E元素。很少用
E:not(s) CSS3 匹配不含有s選擇符的元素E。
E:root CSS3 匹配E元素在文檔的根元素。常指html元素
E:first-child CSS2 匹配父元素的第一個子元素E。
E:last-child CSS3 匹配父元素的最後一個子元素E。
E:only-child CSS3 匹配父元素僅有的一個子元素E。
E:nth-child(n) CSS3 匹配父元素的第n個子元素E。
E:nth-last-child(n) CSS3 匹配父元素的倒數第n個子元素E。
E:first-of-type CSS3 匹配同類型中的第一個同級兄弟元素E。
E:last-of-type CSS3 匹配同類型中的最後一個同級兄弟元素E。
E:only-of-type CSS3 匹配同類型中的唯一的一個同級兄弟元素E。
E:nth-of-type(n) CSS3 匹配同類型中的第n個同級兄弟元素E。
E:nth-last-of-type(n) CSS3 匹配同類型中的倒數第n個同級兄弟元素E。
E:empty CSS3 匹配沒有任何子元素（包括text節點）的元素E。
E:checked CSS3 匹配用戶界面上處於選中狀態的元素E。(用於input type為radio與checkbox時)
E:enabled CSS3 匹配用戶界面上處於可用狀態的元素E。
E:disabled CSS3 匹配用戶界面上處於禁用狀態的元素E。
E:target CSS3 匹配相關URL指向的E元素。
★first-child 與first-of-type的區別：
舉例：
<div class="test"> <p>第一個子元素</p> <h1>第二個子元素</h1> <span>第三個子元素</span> <span>第四個子元素</span> </div>語法說明： p:first-child 匹配到的是p元素,因為p元素是div的第一個子元素； h1:first-child 匹配不到任何元素，因為在這裡h1是div的第二個子元素，而不是第一個； span:first-child 匹配不到任何元素，因為在這裡兩個span元素都不是div的第一個子元素； p:first-of-type 匹配到的是p元素,因為p是div的所有為p的子元素中的第一個，事實上這裡也只有一個為p的子元素； h1:first-of-type 匹配到的是h1元素，因為h1是div的所有為h1的子元素中的第一個，事實上這裡也只有一個為h1的子元素； span:first-of-type 匹配到的是第三個子元素span。這裡div有兩個為span的子元素，匹配到的是第一個。 所以，通過以上兩個例子可以得出結論： :first-child 匹配的是某父元素的第一個子元素，可以說是結構上的第一個子元素。 :first-of-type 匹配的是某父元素下相同類型子元素中的第一個，比如 p:first-of-type，就是指所有類型為p的子元素中的第一個。這裡不再限制是第一個子元素了，只要是該類型元素的第一個就行了。 ✪註意：當然這些元素的範圍都是屬於同一級的，也就是同輩的。 同樣類型的選擇器 :last-child 和 :last-of-type、:nth-child(n) 和 :nth-of-type(n) 也可以這樣去理解。 【屬性選擇符】 選擇符 版本 描述 E[att] CSS2 選擇具有att屬性的E元素。 E[att="val"] CSS2 選擇具有att屬性且屬性值等於val的E元素。 E[att~="val"] CSS2 選擇具有att屬性且屬性值為一用空格分隔的字詞列表，其中一個等於val的E元素。 E[att^="val"] CSS3 選擇具有att屬性且屬性值為以val開頭的字元串的E元素。 E[att$="val"] CSS3 選擇具有att屬性且屬性值為以val結尾的字元串的E元素。 E[att*="val"] CSS3 選擇具有att屬性且屬性值為包含val的字元串的E元素。 E[att|="val"] CSS2 選擇具有att屬性且屬性值為以val開頭並用連接符"-"分隔的字元串的E元素。 【偽對象選擇符】 選擇符 版本 描述 E:first-letter/E::first-letter CSS1/3 設置對象內的第一個字元的樣式。 E:first-line/E::first-line CSS1/3 設置對象內的第一行的樣式。 E:before/E::before CSS2/3 設置在對象前（依據對象樹的邏輯結構）發生的內容。用來和content屬性一起使用 E:after/E::after CSS2/3 設置在對象後（依據對象樹的邏輯結構）發生的內容。用來和content屬性一起使用 E::placeholder CSS3 設置對象文字占位符的樣式。 E::selection CSS3 設置對象被選擇時的顏色。 ✪註意：CSS3的語法改成:: ,原本CSS1是: ,故還是直接用兩個冒號為妥。 舉例： html：
<input type="search" placeholder="測試">css:
input::-webkit-input-placeholder {color: green;}
屬性過多我就不一一舉例了，你們可以看手冊或者下麵一位仁兄寫的博文
30個你必須記住的CSS選擇符：http://www.open-open.com/lib/view/open1429583085104.html
