CSS選擇器
CSS選擇器的目的是用來指定HTML中的tag元素、tag中的id、class設定進行CSS的格式設定，一個HTML元素標籤的一般性格式為：
<body>…</body>
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<div id=”myID” class=”class1 class2 class3″></div>
我們可以針對body、h1~h6元素進行格式，
body{ color:red; }
h1 { color:red; }
…
h6 { color:red; }
以上這是標籤選擇器
我們想對一個名為myID的div元素進行格式設定：
#myID { color:red; }
這樣的選擇器叫 ID選擇器
我們想對某一個有指定class1的div進行設定 (通常來說，會有多個div指定class1，所以這叫類別，屬class1類的話，我們就進行某種CSS的格式設定。)
.class1 { color:red; }
這樣的選擇器叫 類別選擇器
上以三個是基本的CSS選擇器。
一個HTML文件裏通常會出現多個h1~h6，只要針對其中一個h1~h6進行格式設定，就會對全部的h1~h6產生作用，也因此，有時，我們只想針對某一個元素下的h1~h6進行設定，我們就會用範圍、子、子孫、兄弟等的方式指定一個特定的元素進行CSS格式設定。
Universal selector通用選取器），使用字元* 設置整個網頁文件的所有元素CSS設定。
* {color:red;}
descendant selectors（子元素/後繼者選取器）
#myID a { color:green;} 指定myID內的a元素適用
Child Selectors
div > p > span > em {
color: red; /* sets color to red */
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Advanced Example of CSS child selectors</title>
<link rel='stylesheet' href='Advanced-Example-of-CSS-child-selector.css' type='text/css'>
</head>
<body>
<div>
<p><span>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit.</span> <span>Donec a <em>urna</em> elit.</span></p>
</div>
</body>
</html>
Result:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit.
Adjacent sibling combinator（相鄰兄弟元素選取器）
CSS
h1 + p { color:green;}
HTML
<h1>標題1</h1>
< p>跟h1相鄰的p會套用綠色</p>
< p>沒有跟h1相鄰的p</p>
Groups of selectors（群組選取器）：列舉適用的元素、ID與類別
h1, h2, p {color:red;}
其他不常見的，請自行參考CSS文件或教學。