css的選取器的詳細介紹

前言

css選取器，是前端的基本功，只要你是一個前端，這個一定要掌握！今天之所以要重溫一下css選取器，主要是和大家再複習一下css選取器中的一些常用符號的使用，例如“+、~、^、$、>、*”等的使用！之所以要複習呢，是因為我一個寫後端的哥們，前端寫的也很好，但是他今天突然問我，css中加號和大於符號是啥意思？我說，這個貌似jquery中也有吧！好吧，可能這些符號不常用，造成我們對這些符號的陌生！那麼今天，我們一起再來複習一下吧！

大家在右側搜尋方塊中搜尋“選取器”，會發現，我之前寫過css用偽類nth-child，進行奇偶行的選擇。今天，關於css3偽類別選取器，我就不多描述了！同時大家也可以看一下我之前寫的“jquery常用選取器總結”，其實，jquery選取器和css選取器類似！特別是在屬性選擇和組合選擇上面！

基本選取器

ID選取器：#header {}
類別選取器：.header {}
元素選取器：div {}
子選取器：ul > li {}
後代選取器：div p {}
偽類別選取器：a:hover {}
屬性選取器：input[type="text"] {}
id優先順序高於類class；
後面的樣式覆蓋前面的；
指定的高於繼承；

css選取器之特殊符號

1、>(大於符號)

大於符號代表選擇子項目，這個我們經常用，值得注意的是 h1>strong 和h1 strong的區別

這2個都是選擇子項目，但是 h1>strong 只選擇某個元素的子項目。例如如下：

<h1>This is <strong class="haorooms">very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
h1>strong ，只有第一個h1下面的strong被選中，第二個不起作用。但是 h1 strong，所有的h1下面的strong都被選中了。

2、+號

選擇相鄰兄弟，這點和jquery相同。

例如：

<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>

h1 + p {margin-top:50px;} //h1後面的第一個p元素會有50px的間距。代表選擇緊接在 h1 元素後出現的段落
屬性選取器

css屬性選取器用處也比較多，之前參加第二節css開發人員大會的時候，有的老師分享，他們公司基本上都是用屬性選取器來寫css,這樣字面明了，他們都不怎麼用class。我感覺這個要分情況，那個老師講的項目是angularjs的，因此屬性選取器比較實用！

舉幾個例子

1、把包含標題（title）的所有元素變為紅色

如下寫：

*[title] {color:red;}
2、將同時有 href 和 title 屬性的 HTML 超連結的文本設定為紅色

a[href][title] {color:red;}
3、指定將http://www.111cn.net /post/css_wl_wys 這篇文字顏色變紅

a[href="http://www.111cn.net /post/css_wl_wys"] {color: red;}

當然也可以多個屬性一起，這裡就不多舉例了！

4、屬性與屬性值必須完全符合

我們來看一個class的div

<p class="important haorooms">This paragraph is a very important warning.</p>
我們用class選擇，大家都曉得，很簡答，但是用屬性選擇，我們用如下：

p[class="important"]
是選擇不到的，因為還有一個haorooms。因此，必須這樣寫：

p[class="important haorooms"] {color: red;}
5、根據部分屬性值選擇

看到上面多個屬性必須完全符合，很不爽，那麼有沒有可以部分匹配屬性的方法呢？答案是有的。還是上面的例子，我們如下選擇就可以了！

p[class~="haorooms"] {color: red;}
如果需要根據屬性值中的詞列表的某個詞進行選擇，則需要使用波浪號（~）。

6、字串匹配屬性選取器

上面說到了~（波浪號選擇），有朋友會把他和*= 搞混，例如，如下例子：

<p  haorooms="importanthaorooms">This paragraph is a very important warning.</p>
我們可以用[haorooms * ="haoroom"]來選擇，這個和~的區別就是包含，~是幾個屬性直接有空格，空格中的一個。*=沒有空格，但是包含某個字元。除此之外，還有開頭選擇和結尾選擇，和jquery類似：

[haorooms^="haorooms"]           選擇 haorooms 屬性值以 "haorooms" 開頭的所有元素
[haorooms$="haorooms"]          選擇 haorooms 屬性值以 "haorooms" 結尾的所有元素

7、特定屬性選擇類型

請看下面的例子：

*[lang|="en"] {color: red;}

上面這個規則會選擇 lang 屬性等於 en 或以 en- 開頭的所有元素。因此，以下樣本標記中的前三個元素將被選中，而不會選擇後兩個元素：

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

CSS的基本選取器

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

:o ut-of-range：與:in-range選擇相反，其中該值在限制範圍外；
:required：應用於具有必填屬性required的表單控制項；

:o 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) 將匹配第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版本瀏覽器吧。