css選擇器

一、元素選擇器

這是最基本的CSS選擇器，HTML文檔中的元素自己就是一個選擇器：

p {line-height:1.5em; margin-bottom:1em;}

二、關係選擇器

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標籤

 

三、屬性選擇器

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連接

四、僞類

: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輸入框；

 ut-of-range：與:in-range選擇相反，其中該值在限制範圍外；

:required：應用於具備必填屬性required的表單控件；

 ptional：應用於沒有必填屬性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) 將匹配第一、三、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元素

五、僞元素

僞元素可用於定位文檔中包含的文本，爲與僞類進行區分，僞元素使用雙冒號 :: 定義，但單冒號 : 也能被識別。

::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版本瀏覽器吧。

 

 

原文地址：http://www.uisdc.com/css-selector