本文轉載：http://www.manongjc.com/article/517.html 選擇器是CSS的核心，從最初的元素、class/id選擇器，演進到偽元素、偽類，以及CSS3中提供的更豐富的選擇器，定位頁面上的任意元素開始變得愈發的簡單。 1、元素選擇器 這是最基本的CSS選擇器，HTML
本文轉載：http://www.manongjc.com/article/517.html
選擇器是CSS的核心，從最初的元素、class/id選擇器，演進到偽元素、偽類，以及CSS3中提供的更豐富的選擇器，定位頁面上的任意元素開始變得愈發的簡單。
1、元素選擇器
這是最基本的CSS選擇器，HTML文檔中的元素本身就是一個選擇器：
p {line-height:1.5em; margin-bottom:1em;}
2、關係選擇器
E F：後代選擇器，該選擇器定位元素E的後代中所有元素F：
ul li {margin-bottom:0.5em;}
E > F：子選擇器，該選擇器定位元素E的直接子元素中的所有元素F，它將忽略任何進一步的嵌套：
ul > li {list-style:none;} //僅限ul的直接子元素li，如果li裡面還嵌套著另一個 ul 結構時，最裡面的 li 將被忽略
E + F：相鄰兄弟選擇器，該選擇器定位與元素E具有相同父元素且在標記中緊鄰E的元素F：
li + li {border-top:1px solid #ddd;} //定位具有相同父元素ul里除第一個li之外的所有li
E ~ F：一般兄弟選擇器，該選擇器定位與元素E具有相同父元素且在標記中位於E之後的所有元素F：
h1 ~ p {color:#f00;} //定位具有相同父元素的，h1標簽之後的所有p標簽
3、屬性選擇器
E[attr]：該選擇器定位具有屬性attr的任何元素E：
input[required] {border:1px solid #f00;} //定位頁面里所有具有必填屬性"required"的input
E[attr=val]：該選擇器定位具有屬性attr且屬性值為val的任何元素E：
input[type=password] {border:1px solid #aaa;} //定位頁面里的密碼輸入框
E[attr|=avl]：該選擇器定位具有屬性attr且屬性值為val或以val-開始的任何元素E：
p[class|=a] {color:#333;} //定位頁面里所有的P段落里具有class屬性且屬性值為a或是a-開始的，比如class="a"以及class="a-b"
E[attr~=val]：該選擇器定位具有屬性attr且屬性值為完整單詞 val 的任何元素E：
div[title~=english] {color:#f88;} //定位頁面里所有具有屬性title且屬性值里擁有完整單詞english的div容器，比如title="english"以及title="a english"
E[attr^=val]：該選擇器定位具有屬性attr且屬性值以val開頭的任何元素E：
div[class^=a] {color:#666;} //定位頁面里具有屬性class且屬性值以a開頭的div容器，比如class="a"以及class="ab"
E[attr$=val]：該選擇器與E[attr^=val]正好相反，定位具有屬性attr且屬性值以val結尾的任何元素E：
div[class$=a] {color:#f00;} //定位頁面里具有屬性class且屬性值以a結尾的div視窗，比如class="nba"以及class="cba"
E[attr*=val]：該選擇器與E[attr~=val]相似，但更進一步，定位具有屬性attr且屬性值任意位置包含val的元素E，val可以是一個完整的單詞，也可以是一個單詞中的一部分：
a[title*=link] {text-decoration:underline;} //定位所有title里具有link字元串的a鏈接
4、偽類
:link：未訪問的鏈接；
:visited：已訪問的鏈接，不建議使用；
:hover：滑鼠移動到容器，不僅限於鏈接，可用於頁面中的任何元素；
:active：被激活時的狀態，不僅限於鏈接，可用於任何具有tabindex屬性的元素；
:focus：獲得焦點時狀態，不僅限於鏈接，可用於任何具有tabindex屬性的無線：
input:focus {border:1px solid #333;} //輸入框獲得焦點時的樣式
:enabled：已啟用的界面元素：
input:enabled {border:1px solid #899;}
:disabled：已禁用的界面元素：
input:disabled {background:#eee;}
:target：該選擇器定位當前活動頁面內定位點的目標元素：
#info:target {font-size:24px;} //當訪問的URL網址為 123.html#info 時，id="info"將載入這個字體樣式
:default：應用於一個或多個作為一組類似元素中的預設元素的UI元素；
:valid：應用於有效元素：
input:valid {border:1px solid #6a6;} //當輸入框驗證為有效時載入這個邊框樣式，基於type或pattern屬性
:invalid：應用於空的必填元素，以及未能與type或pattern屬性所定義的需求相匹配的元素：
input:invalid {border:1px solid #f00;} //當輸入框為空且必填時，或已填寫但驗證無效時，載入此邊框樣式
:in-range：應用於具有範圍限制的元素，其中該值位於限制內；比如具有min和max屬性的number和range輸入框；
out-of-range：與:in-range選擇相反，其中該值在限制範圍外；
:required：應用於具有必填屬性required的表單控制項；
optional：應用於沒有必填屬性required的所有表單控制項
:read-only：應用於其內容無法供用戶修改的元素；
:read-write：應用於其內容可供用戶修改的元素，比如輸入框；
:root：根元素，始終指html元素；
E F:nth-child(n)：該選擇器定位元素E的第n個子元素的元素F：
div.class p:nth-child(3) {color:#f00;} //class="class"的div容器里的第3個元素p，如果第3個子元素不是p，此樣式將失效
E F:nth-last-child(n)：該選擇器定位元素E的倒數第n個子元素的元素F；
E:nth-of-type(n)：該選擇器定位元素E的第n個指定類型子元素；
E:nth-lash-of-type(n)：該選擇器定位元素E的導數第n個指定類型子元素：
.class p:nth-child(2) 與 .class p:nth-of-type(2) 的區別在於，如果.class里的第2個子元素不是P元素時，.class p:nth-child(2) 的樣式將無效，而.class p:nth-of-type(2) 將定位在 .class 里的第2個p元素
nth-child(n)、nth-last-child(n)、nth-of-type(n)、nth-last-of-type(n)，這其中的 n 可以使用數字靜態式，比如 .nth-child(2n+1) 將匹配第1、3、5...個元素
E:first-child：父元素的第一個子元素E，與:nth-child(1)相同；
E:last-child：父元素的倒數第一個子元素E；
E:first-of-type：與:nth-of-type(1)相同；
E:last-of-type：與:nth-last-of-type(1)相同；
E:only-child：父元素中唯一的子元素E；
E:only-of-type：父元素中唯一具有該類型的元素E；
E:empty：沒有子元素的元素，沒有子元素包括文本節點；
E:lang(en)：具有使用雙字母縮寫(en)表示的語言的元素；
E:not(exception)：該選擇器將選擇與括弧內的選擇器不匹配的元素：
p:not(.info) {font-size:12px;} //匹配所有class值不為info的p元素
5、偽元素
偽元素可用於定位文檔中包含的文本，為與偽類進行區分，偽元素使用雙冒號 :: 定義，但單冒號 : 也能被識別。
::first-line：匹配文本首行；
::first-letter：匹配文本首字母；
::before 與 ::after ：使用 contnet 屬性生成額外的內容並插入在標記中：
a[href^=http]::after {content:"link"} //在頁面的a鏈接的後面插入文字link
::selection：匹配突出顯示的文本：
::selection {background:#444; color:#fff;} //定義選中的文本顏色與背景色
當然，如果要方便的使用這些強大的CSS選擇器的話，使用Chrome、Firefox之類的瀏覽器吧，最起碼得拋棄IE9以下的IE版本瀏覽器吧。
