主要應用的選取器就三類：元素選取器，ID選取器，類別選取器。
選取器的結合關係有三種：後代結合、子項目結合、相鄰兄弟結合。
元素選取器就是以html文檔中的標準元素標籤作為選取器的標誌的。如：
h1 {color:red; font-size:14px;}
ID選取器，以元素的唯一ID作為選取器標誌。如：
#red{color:red;}#green{color:green;}
類別選取器，以元素的類（class）作為選取器標誌。如：
.center {text-align: center}
從選取器的結合關係來看：
後代結合，就是兩個選取器之間用空格分開。如 “A B”，表示A所選擇的元素中包含的B所選擇的元素。如：
.fancy td {color: #f60;background: #666;}上述例子，表示fancy類的元素中包含的td元素。注意：這個包含不一定是相鄰子代包含，可以是孫代包含，故名後代結合。
子項目結合，兩個選取器之間用“>”隔開。如 “A > B”，表示A所選擇元素的相鄰子代元素中B所選擇的元素。如：
h1 > strong {color:red;}
<h1>This is <strong>very</strong> important.</h1><h1>This is <em>really <strong>very</strong></em> important.</h1>
上述例子，在第一句中應用了該樣式，在第二句中沒有。因為第二句中 h1 和 strong 不是相鄰子項目關係。
相鄰兄弟結合，兩個選取器之間用 “+” 隔開。如 “A + B”，表示A和B為相鄰元素，並且有同一個父元素，即他倆為兄弟元素。該選取器選擇的是B元素。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 + p {margin-top:50px;}
</style>
</head>
<body>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
</body>
</html>
上例中，第二個p元素沒有應用樣式，而第一個應用了。
知道了選取器種類以及選取器的結合方式，就會創造出許多種神奇應用了。如：
html > body table + ul {margin-top:20px;}
這個選取器解釋為：選擇緊接在 table 元素後出現的所有兄弟 ul 元素，該 table 元素包含在一個 body 元素中，body 元素本身是 html 元素的子項目。
轉自：http://blog.csdn.net/huangxy10/article/details/8174880
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
