轉(zhuǎn)載自牢記31種CSS選擇器用法
1 *
* {
margin: 0;
padding: 0;
}
星號(hào)選擇器用于選取頁面中的所有元素，可用于快速清除所有元素的 margin 與 padding动雹，但最好只在測(cè)試的時(shí)候使用，而不要正式用在 CSS 文件中跟压，否則會(huì)大大加重瀏覽器負(fù)擔(dān)胰蝠。此外，星號(hào)選擇器也可以給父層的所有子元素設(shè)定樣式震蒋，重復(fù)一遍茸塞，盡量少用這種方式：
#container * {
border: 1px solid black;
}
兼容 IE6+
2 #X
#container {
width: 960px;
margin: auto;
}
id 選擇器，最常見的選擇器用法之一查剖，不可重復(fù)使用钾虐。
兼容 IE6+
3 .X
.error {
color: red;
}
class 選擇器，也是最常見的選擇器用法之一笋庄，與 id 選擇器不同的是 class 選擇器可同時(shí)選取多個(gè)元素效扫，而 id 選擇器只能給一個(gè)獨(dú)一無二的元素設(shè)定樣式。
兼容 IE6+
4 X Y
li a {
text-decoration: none;
}
后代選擇器 (descendant selector)直砂，選取 X 元素內(nèi)的所有
Y 元素菌仁，比如上面這段代碼將選取 li 標(biāo)簽內(nèi)的所有鏈接。
兼容 IE6+
5 X
a { color: red; }
ul { margin-left: 0; }
標(biāo)簽選擇器 (type selector)哆键，用于選取 HTML 標(biāo)簽 (tag)掘托。
兼容 IE6+
6 X:visited and X:link
a:link { color: red; }
a:visted { color: purple; }
:link 偽類選擇器 (pseudo class selector) 用于選取所有未點(diǎn)擊過的鏈接，而 :visited 則用于選取所有已訪問過的鏈接籍嘹。
兼容 IE6+
7 X + Y
ul + p {
color: red;
}
臨近選擇器 (adjacent selector)闪盔，選取緊鄰在 X 元素后面出現(xiàn)的第一個(gè)元素，比如上面這段代碼將選取 ul 元素后出現(xiàn)的第一個(gè)元素辱士，也就是 p 元素泪掀。
兼容性 IE6+
8 X > Y
div#container > ul {
border: 1px solid black;
}
在第 4 條中，后代選擇器 X Y 選取父層 X 內(nèi)的所有 Y 元素颂碘；子選擇器 X > Y 則只選取直接出現(xiàn)在父層 X 內(nèi)的 Y 元素异赫。比如下面的 HTML 結(jié)構(gòu)中，#container > ul 選取直接出現(xiàn)在 div#container 內(nèi)的 ul 元素，不包含嵌套在 li 內(nèi)的 ul 元素：
<div id="container">
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
</div>
兼容 IE6+
9 X ~ Y
ul ~ p {
color: red;
}
同樣也是臨近選擇器塔拳，前面第 7 條 X + Y 選取緊鄰在 X 后出現(xiàn)的第一個(gè)元素鼠证，而 X ~ Y 將選取 X 元素后出現(xiàn)的所有同級(jí)元素。上面這段代碼將選取 ul 元素后出現(xiàn)的所有同級(jí) p 元素靠抑，而不是像 ul + p 這樣選取第一個(gè)出現(xiàn)的 p 元素量九。
兼容 IE7+
10 X[title]
a[title] {
color: green;
}
屬性選擇器 (attributes selector)，根據(jù)元素使用的屬性進(jìn)一步縮小選取范圍颂碧，上面這段代碼將選取所有使用了 title 屬性的鏈接荠列。或者使用a[title="title content"]{color:green}
再進(jìn)一步縮小選取范圍载城。
兼容 IE7+
11 X[href="foo"]
<pre style="padding: 10px 15px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 14px; color: rgb(51, 51, 51); border-radius: 4px; display: block; margin: 0px 0px 20px; line-height: 20px; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; background: none 0px 0px repeat scroll rgba(102, 128, 153, 0.05); border: 0px solid rgba(0, 0, 0, 0.15); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">a[href="http://net.tutsplus.com"] {
color: #1f6053; /* nettuts green */
}</pre>
上面這段代碼將選取所有跳轉(zhuǎn)到
http://net.tutsplus.com
的鏈接肌似，這些鏈接將顯示為綠色，其他鏈接不受影響诉瓦。
只是這種方式很嚴(yán)格不能相差一個(gè)字符川队，下面將會(huì)逐一介紹更靈活的用法。
兼容 IE7+
12 X[href*="nettuts"]
a[href*="tuts"] {
color: #1f6053; /* nettuts green */
}
*表示只要屬性值中包含雙引號(hào)內(nèi)的內(nèi)容就滿足選取要求垦搬，這段代碼將選取跳轉(zhuǎn)到 nettuts.com呼寸，net.tutsplus.com，或者 tutsplus.com 等鏈接猴贰。
兼容 IE7+
13 X[href^="http"]
a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}
^
表示只要屬性值以雙引號(hào)內(nèi)的內(nèi)容開頭就滿足選取要求对雪，這段代碼也常用來給頁面中所有外部接設(shè)定樣式。
兼容 IE7+
14 X[href$=".jpg"]
a[href$=".jpg"] {
color: red;
}
$
表示只要屬性值以雙引號(hào)內(nèi)的內(nèi)容結(jié)尾就滿足選取要求米绕，這段代碼將選取所有跳轉(zhuǎn)到 jpg 圖片的鏈接瑟捣。
兼容 IE7+
15 X[data-*="foo"]
上面第 14 條提到了如何選取所有跳轉(zhuǎn)到 jpg 圖片的鏈接，若要選取跳轉(zhuǎn)到圖片的所有鏈接可以用下面的方法：
a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"]
{ color: red; }
或者栅干，先給圖片鏈接添加 data- 屬性（注：HTML5 Custom Data Attributes）
<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>
然后再通過屬性選擇器選嚷跆住：
a[data-filetype="image"] {
color: red;
}
兼容 IE7+
16 X[foo~="bar"]
a[data-info~="external"] {
color: red;
}
a[data-info~="image"] {
border: 1px solid black;
}
如果屬性值中有用空格分隔的一連串屬性值，~可以選取其中一個(gè)屬性值碱鳞，比如：
<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>
借助 ~ 選取包含 external 或者 image 屬性值的元素：
/* Target data-info attr that contains the value "external" */
a[data-info~="external"] {
color: red;
}
/* And which contain the value "image" */
a[data-info~="image"] {
border: 1px solid black;
}
兼容 IE7+
17 X:checked
input[type=radio]:checked {
border: 1px solid black;
}
:checked 偽類選擇器用于選取所有標(biāo)記為 checked 的元素桑李，比如單選框 (radio button) 或復(fù)選框 (checkbox)。
兼容 IE9+
18 X:after
http://www.igooda.cn/jzjl/20131009384.html
:before 與 :after 是兩個(gè)令人興奮的偽類選擇器窿给，幾乎每天都有人發(fā)明出一些新用法贵白，這里簡(jiǎn)單介紹一下如何用它清除浮動(dòng)：
.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
.clearfix {
*display: inline-block;
_height: 1%;
}
這種方式通過 :after 在元素后面添加一塊區(qū)域，然后將其隱藏崩泡，可以彌補(bǔ) overflow: hidden; 的缺陷禁荒。
根據(jù) CSS3 選擇器標(biāo)準(zhǔn)，理論上偽類選擇器應(yīng)該使用雙冒號(hào)角撞，但實(shí)際上瀏覽器也支持單冒號(hào)的形式呛伴，所以可以繼續(xù)使用單冒號(hào)勃痴。
兼容 IE8+
19 X:hover
div:hover {
background: #e3e3e3;
}
最常用的偽類選擇器，不多解釋了热康，只是需要注意 IE6 不支持將 :hover 作用于除 a 鏈接外的其他元素沛申。
a:hover {
border-bottom: 1px solid black;
}
另外提醒一點(diǎn)：border-bottom: 1px solid black;
的效果要比
text-decoration: underline;
好看一些。
兼容 IE6+ （在 IE6 中 :hover 只能作用于鏈接）
20 X:not(selector)
div:not(#container) {
color: blue;
}
:not 偽類選擇器有時(shí)會(huì)起到很重要的作用褐隆，假設(shè)現(xiàn)在要選取除 #contaienr 外的所有 div 元素污它，就可以用上面的代碼實(shí)現(xiàn)。
兼容 IE9+
21 X::pseudoElement
p::first-line {
font-weight: bold;
font-size: 1.2em;
}
通過偽元素（使用雙冒號(hào) ::）可以給元素的某一部分設(shè)定樣式庶弃，比如第一行、或者第一個(gè)字母德澈。需要注意的是歇攻，這只對(duì)塊級(jí)元素 (block level elements) 生效。
提示：偽元素 (pseudo element) 使用雙冒號(hào) ::
選取段落的第一個(gè)字母
p::first-letter {
float: left;
font-size: 2em;
font-weight: bold;
font-family: cursive;
padding-right: 2px;
}
這段代碼將選取頁面中所有 p 元素梆造，然后再選取其中的第一個(gè)字母缴守。
選取段落的第一行
p::first-line {
font-weight: bold;
font-size: 1.2em;
}
與上面的例子類似，通過 ::first-line 選取頁面的第一行镇辉。
為了兼容 CSS1 與 CSS2 中的偽元素（比如 :first-line, :first-letter, :before 以及 :after）屡穗，瀏覽器接受單冒號(hào)與雙冒號(hào)兩種格式，但對(duì)于 CSS3 中最新引入的偽元素忽肛，必須使用雙冒號(hào)村砂。
兼容 IE6+
22 X:nth-child(n)
li:nth-child(3) {
color: red;
}
:nth-child(n) 用于選取 stack 中的某一個(gè)元素，只接受整數(shù)作參數(shù)（參數(shù)從 1 開始計(jì)數(shù)）屹逛，如果你想選取第二個(gè) li 元素础废，只需這樣寫 li:nth-child(2)。
也可以設(shè)定可變的參數(shù)罕模，比如 li:nth-child(4n) 將選取第 4, 8 , 12… 個(gè)元素（4*n, n=1, n++）评腺。
兼容 IE9+
23 X:nth-last-child(n)
li:nth-last-child(2) {
color: red;
}
除了正序（從上往下）選擇，也可以使用 :nth-last-child(n) 倒序（從下往上）選擇第幾個(gè)元素淑掌，其他用法與第 22 條完全一樣蒿讥。
兼容 IE9+
24 X:nth-of-type(n)
ul:nth-of-type(3) {
border: 1px solid black;
}
:nth-of-type(n) 的作用不是選取子元素 (child element)，而是選取同類元素 (type of element)抛腕。想象一下 HTML 文件中包含 5 個(gè) ul 元素芋绸，現(xiàn)在要選取第三個(gè)，只需使用上面的代碼兽埃，而不用再單獨(dú)這個(gè) ul 添加 id侥钳。
關(guān)于 :nth-child 與 :nth-of-type 的區(qū)別，具體請(qǐng)查看 CSS-Tricks 網(wǎng)站的解釋柄错，簡(jiǎn)單來說舷夺，如果父層內(nèi)只包含一種元素（比如都是 p 元素）那兩種用法是等效的苦酱，如果父層包含多種元素（比如 p 元素與同級(jí)的其他元素），需要選取第幾個(gè) p 元素時(shí)應(yīng)該用 :nth-of-type给猾。
兼容 IE9+
25 X:nth-last-of-type(n)
ul:nth-last-of-type(3) {
border: 1px solid black;
}
與第 24 條用法相同疫萤，倒序選取同類元素。
兼容 IE9+
26 X:first-child
ul li:first-child {
border-top: none;
}
選取父層內(nèi)的第一個(gè)子元素敢伸。
兼容 IE7+
27 X:last-child
ul > li:last-child {
color: green;
}
與第 26 條用法相同扯饶，區(qū)別在于 :last-child 選取父層元素內(nèi)的最后一個(gè)子元素。
:first-child 與 :last-child 通常用來清除邊框 (border)池颈，比如
<ul></ul>
內(nèi)每個(gè)
<li></li>
都使用了 border-top 與 border-bottom 邊框尾序，結(jié)果是，第一個(gè)元素的上方與最后一個(gè)元素的下方會(huì)是單邊框效果躯砰。這種情況可以用 :first-child 與 :last-child 清除上下的邊框每币，而不用給第一個(gè)元素添加id="first" 或者給最后一個(gè)元素添加 id="last"。
兼容 IE9+
28 X:only-child
div p:only-child {
color: red;
}
這個(gè)偽類選擇器不常用琢歇，它可以選取包含唯一指定子元素的父層兰怠。比如上面的代碼中將選取下面第一個(gè) div 元素，而不是第二個(gè) div 中的 p 元素李茫。
<div><p> My paragraph here. </p></div>
<div>
<p> Two paragraphs total. </p>
<p> Two paragraphs total. </p>
</div>
兼容 IE9+
29 X:only-of-type
li:only-of-type {
font-weight: bold;
}
這個(gè)選擇器會(huì)選取某個(gè)元素揭保，并且這個(gè)元素在其父層內(nèi)沒有其他同級(jí)同類元素（不一定是唯一元素）。比如魄宏，要選取所有只包含一個(gè)
li 元素的 ul 元素該怎么做呢秸侣？如果使用 ul li 將選取所有 li 元素，應(yīng)該使用 only-of-type娜庇。
兼容 IE9+
30 X:first-of-type
first-of-type 偽類可以選取某種元素的第一個(gè)同類元素塔次。
為了更好地理解它的用法，現(xiàn)在思考一下如何在下面的 HTML 結(jié)構(gòu)中選取 List Item 2 名秀？
<div>
<p> My paragraph here. </p>
<ul>
<li> List Item 1 </li>
<li> List Item 2 </li>
</ul>
<ul>
<li> List Item 3 </li>
<li> List Item 4 </li>
</ul>
</div>
方法一
ul:first-of-type > li:nth-child(2) {
font-weight: bold;
}
這段代碼的意思是：首先選取第一個(gè) ul 元素励负；然后選取其中的所有直接子元素，也就是 li匕得；最后選取第二個(gè)子元素继榆。
方法二
p + ul li:last-child {
font-weight: bold;
}
找到 p 元素后第一個(gè)出現(xiàn)的 ul 元素，然后選取其中的最后一個(gè)子元素汁掠。
方法三
ul:first-of-type li:nth-last-child(1) {
font-weight: bold;
}
找到第一個(gè) ul 元素略吨，然后從上往下選取第一個(gè)子元素。
兼容 IE9+
31 偽類選擇器疊用
有些偽類選擇器或者偽元素是可以疊用的考阱，例如：
#post p:nth-of-type(2):first-letter {
float: left;
margin: 0 5px 0 1em;
width: 1em;
height: 1em;
font-size: 2em;
}
目測(cè)兼容 IE9+翠忠，聽說 IE10 有個(gè)小 bug
引用：http://www.cnblogs.com/moses/p/3436468.html
下面是摘自http://www.uisdc.com/css-selector的
1、元素選擇器
這是最基本的CSS選擇器乞榨，HTML文檔中的元素本身就是一個(gè)選擇器：
p {line-height:1.5em; margin-bottom:1em;}
2秽之、關(guān)系選擇器
E F：后代選擇器当娱，該選擇器定位元素E的后代中所有元素F：
ul li {margin-bottom:0.5em;}
E > F：子選擇器，該選擇器定位元素E的直接子元素中的所有元素F考榨，它將忽略任何進(jìn)一步的嵌套：
ul > li {list-style:none;}
//僅限ul的直接子元素li跨细，如果li里面還嵌套著另一個(gè) ul 結(jié)構(gòu)時(shí)，最里面的 li 將被忽略
E + F：相鄰兄弟選擇器河质，該選擇器定位與元素E具有相同父元素且在標(biāo)記中緊鄰E的元素F：
li + li {border-top:1px solid #ddd;}
//定位具有相同父元素ul里除第一個(gè)li之外的所有l(wèi)i
E ~ F：一般兄弟選擇器冀惭，該選擇器定位與元素E具有相同父元素且在標(biāo)記中位于E之后的所有元素F：
h1 ~ p {color:#f00;}//定位具有相同父元素的，h1標(biāo)簽之后的所有p標(biāo)簽
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結(jié)尾的任何元素E：
div[class$=a] {color:#f00;}
//定位頁面里具有屬性class且屬性值以a結(jié)尾的div窗口，比如class="nba"以及class="cba"
E[attr*=val]：該選擇器與E[attr~=val]相似科吭，但更進(jìn)一步，定位具有屬性attr且屬性值任意位置包含val的元素E猴鲫，val可以是一個(gè)完整的單詞对人，也可以是一個(gè)單詞中的一部分：
a[title*=link] {text-decoration:underline;}
//定位所有title里具有l(wèi)ink字符串的a鏈接
或者可以看
