淺談CSS3選擇器
CSS3選擇器再CSS2.1選擇器的基礎上增加了屬性選擇器、偽類選擇器、過濾選擇器，減少了對HTML類名或ID名的依賴，避免了對HTML結構的干擾，讓編寫程式碼更加輕鬆。
1，基本選擇器
（1）標籤選擇器(型別選擇器)
統一定義常用標籤的基本樣式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello world.</title> <style> p{ /*標籤選擇器*/ font-size:15px; color:#00796b; } </style> </head> <body> <p>山下蘭芽短浸溪，鬆間沙路淨無泥。</p> </body> </html>
（2）類選擇器
類選擇器能為相同物件定義不同的樣式，為不同的物件定義相同的樣式，以“.”字首開頭，然後接一個自定義的類名，例如：.myfont。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello world.</title> <style> p { /*標籤選擇器*/ font-size: 25px; color: #00396b; } .myfont { /*類選擇器*/ font-size: 18px; font-weight: bold; color: #00796b; } </style> </head> <body> <p>william</p> <p class="myfont">山下蘭芽短浸溪，鬆間沙路淨無泥。</p> <p class="myfont">幾處早鶯爭暖樹，誰家新燕啄春泥。</p> <div class="myfont">隨意春芳歌，王孫自可留。</div> </body> </html>
（3）ID選擇器
ID選擇器以“#”開頭，然後接一個自定義的ID名。HTML所有的標籤都支援ID選擇器，只要在標籤中定義id屬性就行了。ID選擇器一般是用來定義HTML框架結構的佈局效果，因為元素ID都是唯一的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello world.</title> <style> #poetry{ font-size: 25px; margin: auto; text-align: center; color: #00796b; } </style> </head> <body> <div id="poetry">水面清圓，一一風荷舉。</div> </body> </html>
（4）通配選擇器（萬用字元）
如果所有的元素都需要定義相同的樣式效果就用通配選擇器，通配選擇器以“*”表示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world.</title>
<style>
*{
font-size: 25px;
margin: auto;
text-align: center;
color: #00796b;
}
</style>
</head>
<body>
<div>山下蘭芽短浸溪，鬆間沙路淨無泥。</div>
<span>隨意春芳歌，王孫自可留。</span>
<p>水面清圓，一一風荷舉。</p>
</body>
</html>
2，組合選擇器
（1）包含選擇器
包含選擇器通過空格識別符號來表示，前面一個選擇器表示父節點，而後面的選擇器表示子節點。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world.</title>
<style>
*{
margin: auto;
text-align: center;
}
#man p{
color: #00796b;
font-size: 20px;
font-weight: bold;
}
#woman p{
color: pink;
font-weight: 100;
font-size: 25px;
}
</style>
</head>
<body>
<div id="man">
<p>李白</p>
<p>白居易</p>
</div>
<div id="woman">
<p>劉莉</p>
<p>李梅梅</p>
</div>
</body>
</html>（2）子選擇器
子選擇器以“>”表示，子選擇器是指定父元素包含下的子元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world.</title>
<style>
*{
margin: auto;
text-align: center;
}
#man>p{
color: #00796b;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="man">
<p>李白</p>
<p>白居易</p>
</div>
</body>
</html>（3）相鄰選擇器
相鄰選擇器通過“+”分隔符進行定義，TA指定的元素關係是兄弟關係。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world.</title>
<style>
*{
margin: auto;
text-align: center;
}
h1+p{
color: #00796b;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="man">
<h1>李白</h1>
<p>白居易</p>
</div>
<div id="woman">
<h1>李清照</h1>
<p>唐琬</p>
</div>
</body>
</html>（4）兄弟選擇器
兄弟選擇器的作用是查詢某一個指定元素的後面的所有兄弟結點，以“~”表示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world.</title>
<style>
*{
margin: auto;
text-align: center;
}
h1~p{
color: #00796b;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="man">
<span>hello</span>
<h1>李白</h1>
<p>白居易</p>
<p>白居</p>
<p>白易</p>
<p>白嵩</p>
<p>白豪</p>
</div>
</body>
</html>（5）分組選擇器
分組選擇器是以“,”分隔符進行定義。嚴格的來講分組選擇器不是一種選擇器型別，而是一種選擇器使用方法。當多個物件定義了相同的樣式時，就可以把它們分成一組，這樣能夠簡化程式碼。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world.</title>
<style>
*{
margin: auto;
text-align: center;
}
span,h1,h2,p,b{
color: #00796b;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="man">
<span>hello</span>
<h1>李白</h1>
<h2>白居易</h2>
<p>白居</p>
<b>白易</b>
</div>
</body>
</html>3，屬性選擇器
CSS3在CSS2的基礎上新增了3個屬性選擇器，分別是E[attr^="value"]、E[attr$="value"]、E=[attr*="value"]。三個新增的選擇器和已定義的E[attr]、E[attr="value"]、E[attr~="attr"]、E[attr|="value"]共同構成強大的HTML屬性過濾器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world.</title>
<style>
* {
margin: auto;
text-align: center;
}
/*E[attr]*/
[id] {
color: #00796b;
}
[title] {
font-size: 35px;
color: #00796b;
font-weight: 100;
}
[title][href] {
color: darkolivegreen;
text-decoration: none;
}
/*E[attr="value"]*/
[href="#well"] {
font-size: 27px;
color: red;
text-decoration: none;
}
[href="#pick"] {
font-size: 22px;
color: green;
text-decoration: none;
}
/*E[attr~="value"]*/
[class~="important"] {
font-size: 35px;
color: blue;
}
/*E[att^=value]只要屬性值裡有這個value就行*/
[class^="one"] {
font-size: 12px;
color: #999999;
}
/*E[att$=value]只要屬性值的字尾是value就選中*/
[class$="in"] {
font-size: 32px;
color: darkorange;
}
/*E[att*=value] 只要屬性值裡包含value就選中*/
[class*="go"] {
font-size: 15px;
color: darkmagenta;
}
/*E[attr|="value"] 只要屬性值是value或者以value-開頭就選中*/
[class|="demo"] {
font-size: 35px;
color: #00799b;
}
</style>
</head>
<body>
<!--E[attr]-->
<span id="down">李白乘舟將欲行</span>
<span title="hello">幾處早鶯爭暖樹</span>
<p title="world">誰家新燕啄春泥</p>
<a title="like" href="www.good.wang">益州疲敝</a>
<!--E[attr="value"]-->
<a href="#well">月出於東山之上</a>
<a href="#pick">徘徊於斗牛之間</a>
<!--E[attr~="value"]-->
<p class="important warning">苟富貴</p>
<p class="important">勿相忘</p>
<!--E[att^=value]-->
<p class="one">國破山河在，城春草木深。</p>
<p class="two">感時花濺淚，恨別鳥驚心。</p>
<p class="onesteep">烽火連三月，家書抵萬金。</p>
<p class="twoland">白頭搔更短，渾欲不勝簪。</p>
<!--E[att$=value]-->
<p class="oldok">好雨知時節，當春乃發生。</p>
<p class="oldyeh">隨風潛入夜，潤物細無聲。</p>
<p class="oldmain">野徑雲俱黑，江船火獨明。</p>
<p class="newmain">曉看紅溼處，花重錦官城。</p>
<!--E[att*=value]-->
<p class="dremgo">明月鬆間照，清泉石上流。</p>
<p class="maingo">空山新雨後，天氣晚來秋。</p>
<p class="gohome">竹喧歸浣女，蓮動下漁舟。</p>
<p class="oldgodemo">隨意春芳歌，王孫自可留。</p>
<!--E[attr|="value"]-->
<p class="demo">山不在高</p>
<p class="demo-R">有仙則名</p>
<p class="Ademo">水不在深</p>
<p class="MdemoM">有龍則靈</p>
</body>
</html>4，偽類選擇器
偽類選擇器包括偽類和偽物件選擇器，偽類選擇器以“:”作為字首識別符號。冒號前後沒有空格，否則將會被視為類選擇器。
單純式用法：div:hover{background-color:red;}
混合式用法：div.selected:hover{background-color:green;}
（1）動態偽類選擇器
錨點偽類選擇器：E:link（未被訪問過） 和 E:visited（已被訪問過）。
行為偽類選擇器：E:active（點選時）、E：hover（滑鼠滑過時）、E：focus（元素獲得焦點時）。
/*連結沒被訪問時為黑色*/
.demo a:link{
color: black;
}
/*連結被訪問後為灰色*/
.demo a:visited{
color: gray;
}
/*滑鼠放在連線上時顯示為藍色*/
.demo a:hover{
color: blue;
}
/*滑鼠點選時啟用連結那一下顯示為綠色*/
.demo a:link{
color: green;
}
（2）結構偽類選擇器
結構偽類選擇器是CSS3新設計的選擇器，TA利用HTML的樹狀結構實現元素選擇，可以減少class屬性和id屬性的定義。
①:first-child:選擇一個元素的第一個子元素。（不支援ie6）。
比如我們這裡的這個demo，你想讓列表中的第一個"li"具有與其他"li"有不同的樣式，我們就可以使用:first-child來實現。
.demo li:first-child{border:1px dashed #666666;background-color:lightgray}②:last-child:選擇一個元素的最後一個子元素。
讓列表中的最後一個"li"具有與其他"li"有不同的樣式。
.demo li:last-child{border:1px dashed #666666;background-color:lightgray}③:nth-child():選擇某個元素的一個或多個特定的子元素。[:nth-child(-3)是錯誤的寫法 ,不支援ie6~ie8 ]。
:nth-child(length);/*引數是具體數字*/
:nth-child(n);/*引數是n,n從0開始計算*/
:nth-child(n*length)/*n的倍數選擇，n從0開始算*/
:nth-child(n+length);/*選擇大於或等於length的元素*/
:nth-child(-n+length)/*選擇小於或等於length的元素*/
:nth-child(n*length+1);/*表示隔幾選一*/
//上面length為整數，n表示一個從0開始的自然數。.demo li:nth-child(n){border:1px solid #999999;background-color:lightblue;}
/*n=0;沒選中。n=1;選第一個。n=2;選中第二個...*/
.demo li:nth-child(2n){border:1px solid #999999;background-color:lightblue;}
/*選中0，2，4，6，8...*/
.demo li:nth-child(2n-1){border:1px solid #999999;background-color:lightblue;}
/*選中0，1，3，5，7...*/
.demo li:nth-child(n+5){border:1px solid #999999;background-color:lightblue;}
/*選中5，6，7，8，9...*/
.demo li:nth-child(-n+5){border:1px solid #999999;background-color:lightblue;}
/*選中5，4，3，2，1*/
.demo li:nth-child(3n+1){border:1px solid #999999;background-color:lightblue;}
/*選中1，4，7，10...*/④:nth-last-child():選中某個元素的一個或多個特定的子元素，從這個元素的最後一個子元素開始計算。(不支援ie6~ie8)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world.</title>
<style>
div{
margin: auto;
text-align: center;
}
li:nth-last-child(2n){
background-color: #0055cc;
list-style: none;
}
</style>
</head>
<body>
<div>
<ul>
<li>宋公明</li>
<li>李靖宇</li>
<li>周伯通</li>
<li>法拉第</li>
<li>胖大海</li>
<li>胖大海</li>
</ul>
</div>
</body>
</html>※如果元素個數為奇數，TA選中的就是偶數，反之選中的是奇數。
⑤:nth-of-type():選擇指定的元素。(不支援ie6~ie8)。
:nth-of-type()的用法和:nth-child的用法是一樣的，不同的是:nth-of-type()指定了元素的型別。
⑥:nth-last-of-type():選擇指定的元素，從元素的最後一個開始計算。(不支援ie6~ie8)。
:nth-last-of-type()的用法和:nth-last-child()的用法是一樣的，不同的是:nth-last-of-type()指定了元素的型別。
⑦:first-of-type:選擇一個上級元素下的第一個同類子元素。(不支援ie6~ie8)。
和:first-child類似，不同的是指定了元素的型別，用的不多。
⑧:last-of-type:選擇一個上級元素下的最後一個同類子元素。(不支援ie6~ie8)。
和:last-child類似，不同的是指定了元素的型別，用的不多。
⑨:only-child:選擇的元素是他的父級元素的唯一子元素。(不支援ie6~ie8)。
⑩:only-of-type:選擇一個上級元素的唯一一個同類型的子元素。(不支援ie6~ie8)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world.</title>
<style>
.dream p{background-color: #cccccc}
.dream p:only-child{background-color: #0055cc;color:#fff;}
.dream p:only-of-type{background-color: green;color: #fff}
</style>
</head>
<body>
<div class="dream">
<p>凌晨夢見腳趾頭被人用針扎</p>
<p>醒了之後才知道是貓在用爪子撓我</p>
<p>夏天就這樣結束了</p>
</div>
<div class="dream">
<p>迷人的不是那張臉，而是那張臉上的最好看的笑容</p>
</div>
<div class="dream">
<span>凌晨夢見腳趾頭被人用針扎</span>
<p>醒了之後才知道是貓在用爪子撓我</p>
<div>夏天就這樣結束了</div>
</div>
</body>
</html>Ⅺ:empty:選擇的元素裡面沒有任何內容。(不支援ie6~ie8)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world.</title>
<style>
.get:empty{
width: 888px;
height: 666px;
border: 5px dashed #0055cc;
}
</style>
</head>
<body>
<div class="get">hello</div>
<div class="get"></div>
</body>
</html>（3）否定偽類選擇器(不支援ie6~ie8)。
:not()表示否定偽類選擇器，TA可以排除掉特定元素，TA和jQuery中的:not選擇器用法一模一樣。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world.</title>
<style>
div{
margin: auto;
text-align: center;
}
li{color:red;}
li:not(.warning){
list-style: none;
font-size: 28px;
color:green;
}
</style>
</head>
<body>
<div>
<ul>
<li>can i help you?sir.</li>
<li class="warning">what f**k is this?</li>
<li>sorry!i don`t know</li>
<li>it`s look like snake.</li>
</ul>
</div>
</body>
</html>※上面的HTML中就用否定偽類選擇器過濾掉了那句髒話，所以它是紅色的。
（4）狀態偽類選擇器(不支援ie6~ie8)。
狀態偽類選擇器主要是針對表單設計的，狀態偽類選擇器就是控制UI元素狀態的，可不可用，選沒選中，獲取或失去焦點，鎖定、待機等。
①:enabled偽類表示匹配指定範圍內所有可用UI元素。例如，下面的表單，input:enabled選擇器只匹配文字框，不匹配按鈕。
<form>
<input type="text"/>
<input type="button" disabled="disabled">
</form>②:disabled偽類表示匹配指定範圍內所有不可用UI元素。例如，下面的表單，input:disabled選擇器只匹配按鈕，不匹文字框。
<form>
<input type="text"/>
<input type="button" disabled="disabled">
</form>③:checked偽類表示匹配指定範圍內所有可用UI元素。例如，下面的表單，input:checked選擇器只匹配按鈕，不匹配複選框。
<form>
<input type="checkbox"/>
<input type="radio" checked="checked">
</form>（5）目標偽類選擇器(不支援ie8及其以下的瀏覽器不支援目標偽類選擇器)。
目標偽類選擇器是形如E:target,TA匹配E的所有元素，並且匹配元素被相關的URL指向，目標偽類選擇器是動態選擇器，只有當存在URL指向該匹配元素時，樣式效果才被執行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world.</title>
<style>
div:target{
font-size: 32px;
background-color: #00765b;
margin: auto;
text-align: center;
}
</style>
</head>
<body>
<div>
<div id="demo1">春眠不覺曉，</div>
<div id="demo2">處處聞啼鳥。</div>
</div>
</body>
</html>※當在瀏覽器中開啟這個檔案，在URL後面附加”#demo1“，以錨點方式連結到<div id="demo1">時，該元素的樣式就會發生相應的變化。