現(xiàn)在我們可能像為網(wǎng)站上不同的文件類型的鏈接添加不同的圖標，這樣你的網(wǎng)站的訪客就會知道他們將獲得一個圖片、或者PDF文件、或者是一個word文檔等。這就可以使用屬性選擇器來實現(xiàn)：

a[href*=".jpg"] {
	background: url(jpeg.gif) no-repeat left 50%;
	padding: 2px 0 2px 20px;
	}
 
a[href*=".pdf"] {
	background: url(pdf.gif) no-repeat left 50%;
	padding: 2px 0 2px 20px;
	}
 
a[href*=".doc"] {
	background: url(word.gif) no-repeat left 50%;
	padding: 2px 0 2px 20px;
	}

在此例中，我們使用了一個定位所有的鏈接(a)的href屬性分別以.jpg,.pdf或.doc結(jié)束(*)的屬性選擇器。詳細可查看前端觀察之前的一篇文章《使用CSS選擇器創(chuàng)建個性化鏈接樣式》

瀏覽器支持

除了Internet Explorer 6，所有的主流瀏覽器都支持屬性選擇器。這意味著，如果你在你的網(wǎng)站上使用了屬性選擇器，你應(yīng)該確保IE6用戶將仍能獲得一個可用的網(wǎng)站。比如我們的第三個例子，為鏈接添加圖標可以給你的網(wǎng)站帶來另一個級別的可用性，但是如果這些鏈接不顯示任何圖標，該網(wǎng)站仍然還是可用的。

2. 子選擇器

子選擇器用符號“>”表示。它允許你定位某個元素的第一級子元素。

比如，如果你想匹配所有的作為你的網(wǎng)站側(cè)欄的div的子元素的h2元素，而不是可能是在div元素內(nèi)的所有h2元素，也不是div的孫元素(或者更低級別的)，你就可以使用下面的選擇器：

div#sidebar > h2 {
	font-size: 20px;
	}

你當然也可以同時使用子元素和后代元素。比如，如果你想定位只有在body元素的子級div元素內(nèi)的blockquote元素(比如你想匹配主要的div內(nèi)的blockquotes，而不是其它部分的：

body > div > div blockquote {
	margin-left: 30px;
	}

瀏覽器支持

和屬性選擇器一樣，子選擇器不被IE6支持。如果你通過這種方式要實現(xiàn)的效果和網(wǎng)站的可用性或總體設(shè)計息息相關(guān)，你可以考慮使用一個class，或者使用只針對IE6的樣式，但是這將有悖使用子選擇器的目的。

3. 兄弟組合

有兩類兄弟組合：臨近兄弟組合和普通兄弟組合

臨近兄弟組合

該選擇器使用加號“+”來鏈接前后兩個選擇器。選擇器中的元素有同一個父親，而且第二個必須緊緊的跟著第一個。

臨近兄弟組合可以灰常有用，比如，在處理文字的時候。比如我們想對段落后面的h2標題添加一個頂間距“margin-top”(當然或許你無需為h1標簽后面的h2添加，或者它可能是頁面的第一個元素)：

p + h2 {
	margin-top: 10px;
	}

你甚至可以更加具體，你想定位某個特定的div后面的h2：

div.post p + h2 {
	margin-top: 10px;
	}

或者你可以搞得更加復(fù)雜：頁面的第一個段落的第一行字母顯示為小寫字母。

.post h1 + p:first-line {
	font-variant: small-caps;
	}

因為可能大部分日志/文章的第一個段落都會緊緊的在H1標簽的后面。你可以在你的選擇器中借助于h1標簽。

普通兄弟組合

普通兄弟組合和臨近兄弟組合的工作原理很像，不同的是第二個選擇其無需緊緊跟隨第一個。

如果你需要定位所有的某個特定的div里面并且跟在h1標簽后面的p標簽的話(你可能想要這些p標簽比擬的日志的標題前面的文字大些)，你就可以使用這個選擇器：

.post h1 ~ p {
	font-size: 13px;
	}

注：這兩個選擇器太像了，所有不是很好理解，可以試一試下面的這個例子：

CSS:

p + h2{color:red;
	}
	p ~ h2{font-weight:700;
	}

HTML:

<p>咳咳，內(nèi)容。</p>
<h2>標題1</h2>
<h2>標題2</h2>

看看第二個h2的顏色就可以理解了吧？臨近兄弟組合只能匹配第一個選擇器后面的第一個兄弟選擇其，普通兄弟組合則能匹配所有。注：該部分英文原文沒有，是神飛翻譯時自己添加。

瀏覽器支持

Internet Explorer 6依然不能理解兄弟選擇器，但是，另一種情況，如果你的用戶中只有一小部分是IE6用戶，而且網(wǎng)站的結(jié)構(gòu)不會被破壞或者受到嚴重影響，這是實現(xiàn)很多很酷的效果而無需在你的HTML代碼中添加無用的class或id。