根據所獲取頁面中元素的不一樣,把css3選擇器分爲五大類:css
基本選擇器是CSS中使用最頻繁,最基礎,也是CSS中最先定義的選擇器。經過基本選擇器能夠肯定HTML樹形結構中大多素DOM元素節點。html
通配選擇器(*)用來選擇全部元素,固然也能夠選擇某個元素下的全部元素。css3
*{ margin:0; padding:0; }
表示全部元素的內外邊距都爲0。web
元素選擇器(E)是CSS選擇器中最多見,最基本的選擇器。文檔的元素包括html,body,p,div等。瀏覽器
div{ background:blue; }
表示全部div元素背景色是藍色。字體
在使用ID選擇器以前,須要在HTML文檔中給對應的元素設置id屬性並設置值,才能找到對應的元素。ID選擇器具備惟一性,在一個頁面中不能同時出現id相同的屬性值。在CSS樣式中使用id選擇器時,須要在id屬性值的前面加上「#」號,如(#id)。網站
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style> #yxz{ width:100px; height:100px; background:red; } </style> </head> <body> <div id="yxz">我有id</div> <div>呵呵</div> </body> </html>
表示具備id屬性值爲「yxz」的元素寬高爲100px,紅色背景。ui
類選擇器(.class)是以獨立於文檔元素的方式來指定元素樣式。使用方法與ID選擇器相似,首先在HTML給須要的元素定義class屬性,併爲其設置屬性值。但與ID選擇器不一樣的是,類選擇器在一個頁面中能夠有多個相同的類名,而ID選擇器的ID名在整個頁面中只能有一個在CSS樣式中使用類選擇器時,須要在屬性值的前面加上點號(.),如(.class)。編碼
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style> .yxz{ width:100px; height:100px; background:red; } </style> </head> <body> <div class="yxz">我有類名</div> <div>呵呵</div> </body> </html>
表示具備class屬性值爲「yxz」的元素寬高爲100px,紅色背景。spa
類選擇器還有一種使用方法,就是多類選擇器。經過兩個或兩個以上類選擇器合併,來定義有別於一個類名的元素效果。
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style> .yxz{ width:100px; height:100px; background:red; } .yxz.sx{ border:1px solid black; } </style> </head> <body> <div class="yxz sx">我有兩個類名</div> <div class="yxz">呵呵</div> </body> </html>
具備類名「yxz」的兩個div寬高背景都同樣,可是第一個div還有另外一個類名「sx」,經過這個類名爲第一個div增長了邊框屬性。這樣咱們就能夠爲多個屬性設置通常樣式與特殊樣式了。
因爲類名在一個HTML文檔中能夠同時存在於不一樣的元素標籤上。換句話說,在一個HTML文檔中,div能夠有類名「yxz」,ul也能夠有類名「yxz」,但有時候咱們只須要在div上設置樣式,就可使用帶有標籤的類名選擇器。
div.yxz{/*樣式*/}
這樣就能夠只匹配類名爲「yxz」的div元素了。
羣組選擇器(selector1,selectorN)是將具備相一樣式的元素分組在一塊兒,每一個選擇器之間用逗號(,)隔開。
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style> h1,h2{ background:black; color:white; width:200px; float:left; margin-right:20px; } </style> </head> <body> <h1>胸無大志者,必受制於人</h1> <h2>丈夫生不五鼎食,死則五鼎烹耳</h2> </body> </html>
表示h1,h2具備相同的樣式。
層次選擇器經過HTML的DOM元素間的層次關係獲取元素,其主要的層次關係包括後代,父子,相鄰兄弟和通用兄弟幾種關係,經過其中某類關係能夠方便地選定須要的元素。
後代選擇器(E F)也稱爲包含選擇器,中間以空格隔開,做用就是能夠選擇某元素的後代元素。
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style> div span{ background:black; color:white; float:left; margin-right:20px; } </style> </head> <body> <div> <span>胸無大志者,必受制於人</span> <span>丈夫生不五鼎食,死則五鼎烹耳</span> </div> </body> </html>
匹配div的後代元素span。
子選擇器(E>F)只能選擇某元素的子元素,中間用大於號(>)隔開。
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style> div span{ background:black; color:white; float:left; margin-right:20px; } </style> </head> <body> <div> <span>胸無大志者,必受制於人<span>丈夫生不五鼎食,死則五鼎烹耳</span></span> </div> </body> </html>
只能選擇div下的子元素span,span的子元素span是div的後代元素,不能匹配。
相鄰兄弟選擇器(E+F)能夠選擇緊接在另外一個元素後的元素,它們具備一個相同的父元素。
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style> span+span{ background:black; color:white; } </style> </head> <body> <div> <span>胸無大志者,必受制於人</span> <span>丈夫生不五鼎食,死則五鼎烹耳</span> <span>胸無大志者,必受制於人</span> <span>丈夫生不五鼎食,死則五鼎烹耳</span> </div> </body> </html>
匹配span後面且相鄰的兄弟元素span。由於第三個span相鄰第二個span,第四個span相鄰第三個span,因此也可以匹配。
通用兄弟選擇器(E~F)是CSS3新增長的,用於選擇某元素後面的全部兄弟元素,它們也具備相同的父元素。
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style> span~span{ background:black; color:white; } </style> </head> <body> <div> <span>胸無大志者,必受制於人</span> <span>丈夫生不五鼎食,死則五鼎烹耳</span> <span>胸無大志者,必受制於人</span> <span>丈夫生不五鼎食,死則五鼎烹耳</span> </div> </body> </html>
選擇第一個span元素後面的全部兄弟元素span。
css3中的僞類選擇器能夠分紅6種:動態僞類選擇器,目標僞類選擇器,語言僞類選擇器,UI狀態僞類選擇器,結構僞類選擇器和否認僞類選擇器。
僞類選擇器語法書寫時和其餘的CSS選擇器寫法有所區別,都以冒號(:)開頭。
動態僞類並不存在於HTML中,只有當用戶和網站交互的時候才能體現出來。動態僞類包含兩種,第一種是在連接中常看到的錨點僞類,另外一種是用戶行爲僞類。
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style> a:link{ color:red; text-decoration:none; } a:visited{ color:yellow; } a:hover,a:focus{ color:blue; text-decoration:underline; } a:active{ color:black; } </style> </head> <body> <a href="#">胸無大志者,必受制於人</a> </body> </html>
未訪問時爲紅色且取消下劃線,訪問後爲黃色,用戶停留在連接,或連接得到焦點時顯示下劃線並設置藍色,點擊連接時爲黑色。
設置動態僞類選擇器時,必須遵循必定的循序。由於這幾個選擇器具備相同的特殊性,因此根據在文檔中的順序來決定更特殊的選擇器。那麼選擇器的循序就相當重要了,正常的循序應該是:link,:visited,:hover,:active。
目標僞類選擇器「:target」用來匹配文檔連接中的URI中某個標識符的目標元素。URI中的標識符一般會包含一個井號(#),後面帶有一個標誌符名稱,例如「#yxz」,「:target」就是用來匹配ID爲「yxz」的元素。":target"僞類選擇器選取連接的目標元素,而後定義樣式。
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style> p{ font-size:16px; line-height:20px; width:0; height:20px; overflow:hidden; -moz-transition:width 2s ease-in-out; -webkit-transition:width 2s ease-in-out; transition:width 2s ease-in-out; position:absolute; visibility:hidden; } /*假如目標被選中,後面的P元素如此如此*/ div:target p{ width:220px; visibility:visible; } </style> </head> <body> <!--連接目標分別指向兩個div--> <a href="#yxz">點我</a> <a href="#sx">點我</a> <div id ="yxz"> <p>胸無大志者,必受制於人</p> </div> <div id="sx"> <p>丈夫生不五鼎食,死則五鼎烹耳</p> </div> </body> </html>
語言僞類選擇器是根據元素的語言編碼匹配元素。這種語言信息必須包含在文檔中,或者與文檔關聯,不能從CSS指定。爲文檔指定語言,有兩種方法能夠表示。
若是使用HTML5,直接能夠設置文檔的語言。
<!DOCTYPE HTML> <html lang="en-US">
另外一種方法就是手工在文檔中指定lang屬性,並設置對應的語言值。
<body lang="fr">
E:lang(language)表示選擇匹配E的全部元素,且匹配元素指定了lang屬性,並且其值爲language。
主要用於form表單元素上,UI元素的狀態通常包括:啓用,禁用,選中,未選中,得到焦點,失去焦點,鎖定和待機等。在HTML元素中有可用和不可用狀態,例如表單的文本輸入框,還有選中和未選中狀態,例如表單的複選和單選按鈕。這幾種狀態都是CSS3選擇器中經常使用的狀態僞類選擇器。
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style> /*被禁用的表單元素顯示輪廓*/ input:disabled{ outline:1px solid red; } </style> </head> <body> <form> <fieldset> <legend>觀海雲遠</legend> <label for="ysg">楊肅觀</label> <input type="checkbox" name="yxz" id="ysg" /> <label for="qzh">秦仲海</label> <input type="checkbox" name="yxz" id="qzh" disabled="disabled"/> <label for="ly">盧雲</label> <input type="checkbox" name="yxz" id="ly" /> <label for="wdy">伍定遠</label> <input type="checkbox" name="yxz" id="wdy" /> </fieldset> </form> </body> </html>
根據元素在文檔樹中的某些特性(如相對位置)定位到它們。
結構僞類選擇器中的參數n能夠是整數,關鍵詞或公式。
整數:nth-child(3),選擇第3個子元素。
關鍵詞:odd表明奇數子元素,even表明偶數子元素。
公式:默認值爲0,每次遞增1。如:n+1,當n=0時,0+1=1,選擇第1個子元素,當n=1時,1+1=2,選擇第2個子元素,到選完全部子元素爲止。
選擇父元素中的第一個子元素。
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style> /*選擇ul中第1個li元素,改變它的項目符號爲空心圓*/ ul li:first-child{ list-style-type:circle; } </style> </head> <body> <ul> <li>楊肅觀</li> <li>秦仲海</li> <li>盧雲</li> <li>伍定遠</li> </ul> </body> </html>
選擇父元素中的最後一個子元素。
/*選擇ul中最後一個li元素,他的項目符號變爲空心圓*/ ul li:last-child{ list-style-type:circle; }
選擇父元素中的一個或多個子元素。
當n爲整數時:
/*選擇ul中第三個li*/ ul li:nth-child(3){ list-style-type:circle; }
當n爲關鍵詞時:
/*選擇ul中第奇數個li*/ ul li:nth-child(odd){ list-style-type:circle; }
當n爲公式時:
/*選擇ul中第奇數個li*/ ul li:nth-child(n*2-1){ list-style-type:circle; }
與:nth-child相似,但倒是從倒數選擇子元素。
當n爲整數時:
/*選擇ul中倒數第三個li*/ ul li:nth-last-child(3){ list-style-type:circle; }
當n爲關鍵詞時:
/*選擇ul中倒數第奇數個li*/ ul li:nth-last-child(odd){ list-style-type:circle; }
當n爲公式時:
/*選擇ul中倒數第奇數個li*/ ul li:nth-last-child(n*2-1){ list-style-type:circle; }
也與:nth-child相似,不一樣的是它只計算父元素中指定某種類型的子元素。
<ul> <li>楊肅觀</li> <span>王一通</span> <li>秦仲海</li> <li>盧雲</li> <li>伍定遠</li> </ul>
當結構中不止一種類型時,使用nth-child就不可以準確的指定元素了,假如我要匹配第2個li,寫做li:nth-child(2)是不可以匹配的,由於文檔中第2個子元素是span,因此匹配失敗。
ul li:nth-of-type(2){ list-style-type:circle; }
:nth-of-type可以從指定類型的子元素開始計數,第2個元素span不是li,因此被忽略。
與nth-of-type同樣,都是用來選擇指定某種類型的子元素,但它的計數方向倒是從最後一個指定類型的子元素開始,使用方法與以前提到的nth-last-child同樣。
表示一個元素是它父元素的惟一子元素。換句話說,匹配元素的父元素中僅有一個子元素。
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style> /匹配第2個ul中的li,由於它的父元素只有一個子元素/ ul li:only-child{ list-style-type:circle; } </style> </head> <body> <ul> <li>楊肅觀</li> <li>秦仲海</li> <li>盧雲</li> <li>伍定遠</li> </ul> <ul> <li>王一通</li> </ul> </body> </html>
用來選擇一個元素是它父元素惟一一個指定類型的子元素。
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style> /*選擇第2個ul中的span,由於它的父元素中只有1個span元素*/ ul span:only-of-type{ color:red; } </style> </head> <body> <ul> <li>楊肅觀</li> <li>秦仲海</li> <li>盧雲</li> <li>伍定遠</li> <span>小白龍</span> <span>伍崇卿</span> </ul> <ul> <li>盧一雲</li> <li>盧二雲</li> <li>盧三雲</li> <li>盧四雲</li> <span>盧五雲</span> </ul> </body> </html>
用來選擇沒有任何內容的元素。
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style> /*匹配第2個div,由於它沒有任何內容*/ :empty{ width:100px; height:100px; background:red; } </style> </head> <body> <div>胸無大志者,必受制於人</div> <div></div> </body> </html>
否認僞類選擇器「:not()」主要用來定位不匹配該選擇器的元素。
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style> /*匹配全部div元素中除了id名爲yxz的全部元素*/ div:not([id="yxz"]){ color:red; } </style> </head> <body> <div>胸無大志者,必受制於人</div> <div id="yxz">丈夫生不五鼎食,死則五鼎烹耳</div> <div>大丈夫一輩子碌碌無爲,與朽木腐草無異</div> </body> </html>
僞元素可用於定位文檔中包含的文本,但沒法在文檔樹中定位。僞元素早在css中就存在了,「:first-letter」,「:first-line」,「:before」,「:after」。在css3中對僞元素進行了必定的調整,在之前的基礎上增長了一個冒號,相應的變成了「::first-letter」,「::first-line」,「::before」,「::after」,還增長了一個「::selection」。
選擇文本塊中的第一個字母。
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style> /*選擇p段落文本中的第一個字*/ p::first-letter{ font:normal 900 2em/2em serif; float:left; } </style> </head> <body> <p>胸無大志者,必受制於人</p> </body> </html>
與::first-letter相似,也是用來選擇文本,不一樣的是,::first-line選擇文本塊的第一行。
/*選擇段落文本中的第一行*/ p::first-line{ color:blue; }
能夠在文本塊以前(::before)或文本塊以後(::after)插入額外的內容(content)或樣式,生成的內容不會成爲DOM的一部分。
/*在段落文本前加入內容"《",置爲藍色*/ p::before{ content:"《"; color:blue; } /*在段落文本後加入內容"》",置爲紅色*/ p::after{ content:"》"; color:red; }
匹配突出顯示的文本。僞元素::selection僅接受兩個參數,一個是background,一個是color。瀏覽器默認狀況下,選擇突出的網站文本是深藍色背景,白色的字體。
/*背景色爲灰色,前景色爲白色*/ p::selection{ background:#808080; color:#ffffff; } /*爲了支持火狐瀏覽器,須要加上特別的前綴*/ p::-moz-selection{ background:#808080; color:#ffffff; }
在HTML中,經過各類各樣的屬性能夠給元素增長不少附加的信息。css2中引入了一些屬性選擇器,這些選擇器可基於元素的屬性來匹配元素,而css3在css2的基礎上擴展了這些屬性選擇器,支持基於模式匹配來定位元素。
選擇具備屬性attr的元素E。
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style> /*選擇a元素中具備href屬性的元素*/ a[href]{ text-decoration:none; color:black; } </style> </head> <body> <a href="http://www.baidu.com" id=「yxz-1」 class="hello world">胸無大志者,必受制於人</a><br /> <a href="http://www.taobao.com" id="yxz-2" class="hello yxz">大丈夫一輩子碌碌無爲,與朽木腐草無異</a> </body> </html>
選擇E元素中屬性attr的值爲val的元素。
/*選擇a元素中的href屬性且屬性值爲http://www.baidu.com的屬性*/ a[href="http://www.baidu.com"]{ text-decoration:none; color:black; }
選擇E元素中屬性attr的屬性值以val開頭或以val-開頭的元素。
/*選擇a元素中的id屬性且屬性值以yxz或以yxz-開頭的元素*/ a[id|="yxz"]{ text-decoration:none; color:black; }
選擇E元素中屬性attr的值val是被空格隔開的字符串。
/*選擇a元素中的class屬性且屬性值yxz是被空格隔開的*/ a[class~="yxz"]{ text-decoration:none; color:black; }
選擇E元素中的屬性attr,且值val在字符串的任意處。
/*選擇a元素中的class屬性且屬性值yxz在字符串的任意處*/ a[class*="yxz"]{ text-decoration:none; color:black; }
選擇E元素中的屬性attr,且值以val開頭。
/*選擇a元素中的href屬性,且值以http開頭*/ a[href^="http"]{ text-decoration:none; color:black; }
選擇E元素中的屬性attr,且值以val結尾。
/*選擇a元素中的href屬性,且值以com結尾*/ a[href$="com"]{ text-decoration:none; color:black; }
css3選擇器完,但其中運用奧妙,卻永無止