摘要：前言選擇器是前端的基本功只要你是一個前端這個一定要掌握今天之所以要重溫一下選擇器主要是和大家再復習一下選擇器中的一些常用符號的使用例如等的使用之所以要復習呢是因為我一個寫后端的哥們前端寫的也很好但是他今天突然問我中加號和大于號是啥意思我說這

前言

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 只選擇某個元素的子元素。例如如下:
This is class="haorooms">very very important.
This is really very important.

h1>strong ,只有第一個h1下面的strong被選中,第二個不起作用。但是h1 strong,所有的h1下面的strong都被選中了。
2、+號
選擇相鄰兄弟,這點和jquery相同。
例如:
This is a heading.
This is paragraph.
This is paragraph.

h1 + p {margin-top:50px;} //h1后面的第一個p元素會有50px的間距。代表選擇緊接在h1 元素后出現的段落
屬性選擇器
css屬性選擇器用處也比較多,之前參加第二節css開發者大會的時候,有的老師分享,他們公司基本上都是用屬性選擇器來寫css,這樣字面明了,他們都不怎么用class。我感覺這個要分情況,那個老師講的項目是angularjs的,因此屬性選擇器比較實用!
css的選擇器的詳細介紹
舉幾個例子
1、把包含標題(title)的所有元素變為紅色
如下寫:
*[title] {color:red;}
2、將同時有href 和title 屬性的HTML 超鏈接的文本設置為紅色
a[href][title] {color:red;}
3、指定將http://www.51wendang.com /post/css_wl_wys 這篇文字顏色變紅
a[href="http://www.51wendang.com /post/css_wl_wys"] {color: red;}
當然也可以多個屬性一起,這里就不多舉例了!
4、屬性與屬性值必須完全匹配
我們來看一個class的div
class="important haorooms">This paragraph is a very important warning.

我們用class選擇,大家都曉得,很簡答,但是用屬性選擇,我們用如下:
p[class="important"]
是選擇不到的,因為還有一個haorooms。因此,必須這樣寫:
p[class="important haorooms"] {color: red;}
5、根據部分屬性值選擇
看到上面多個屬性必須完全匹配,很不爽,那么有沒有可以部分匹配屬性的方法呢?答案是有的。還是上面的例子,我們如下選擇就可以了!
p[class~="haorooms"] {color: red;}
如果需要根據屬性值中的詞列表的某個詞進行選擇,則需要使用波浪號(~)。
6、字符串匹配屬性選擇器
上面說到了~(波浪號選擇),有朋友會把他和*= 搞混,例如,如下例子:
"importanthaorooms">This paragraph is a very important warning.

我們可以用[haorooms * ="haoroom"]來選擇,這個和~的區別就是包含,~是幾個屬性直接有空格,空格中的一個。*=沒有空格,但是包含某個字符。除此之外,還有開頭選擇和結尾選擇,和jquery類似:
[haorooms^="haorooms"] 選擇haorooms 屬性值以"haorooms" 開頭的所有元素
[haorooms$="haorooms"] 選擇haorooms 屬性值以"haorooms" 結尾的所有元素7、特定屬性選擇類型
請看下面的例子:
*[lang|="en"] {color: red;}
上面這個規則會選擇lang 屬性等于en 或以en- 開頭的所有元素。因此,以下示例標記中的前三個元素將被選中,而不會選擇后兩個元素:
"en">Hello!
"en-us">Greetings!
"en-au">Gday!
"fr">Bonjour!
"cy-en">Jrooana!

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 #ffffd;} //定位具有相同父元素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="http://www.51wendang.comglish"以及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版本瀏覽器吧