通過增刪選擇符熟練各個選擇符的用法：(註：筆者FF瀏覽器在源碼上註釋一部分內容後並不能改變運行後的輸出結果，必須刪除要註釋的內容才行) <!DOCTYPE html><html> <head> <style type="text/css"> section>h1 {font-style:italic ...
通過增刪選擇符熟練各個選擇符的用法：(註：筆者FF瀏覽器在源碼上註釋一部分內容後並不能改變運行後的輸出結果，必須刪除要註釋的內容才行)
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
section>h1 {font-style:italic;}
h1+p {font-variant:small-caps;}
h1~a {color:purple;}
* h1 {color:red;}
* p {color:blue;}
* a {color:green;}
p * {color:black;}
</style>
</head>
<body>
<section>
<h1>An H2 Heading</h1>
<p>This is paragraph 1</p>
<p>Paragraph 2 has <a href="#">a link</a> in it.</p> 嵌套標簽內標簽預設是紫色，且有下劃線
<a href="#">Link</a>
</section>
</body>
</html>
最終效果：
1、 子選擇符>
標簽1 > 標簽2
標簽2必須是標簽1的子元素，或者反過來說，標簽1必須是標簽2的父元素。與常規的上下文選擇符不同，這個選擇符中的標簽1不能是標簽2的父元素之外的其他祖先元素。
section>h1 {font-style:italic;}
2、 緊鄰同胞選擇符+
標簽1 + 標簽2
標簽2必須緊跟在其同胞標簽1的後面。
h1 + p {font-variant:small-caps;}
3、 一般同胞選擇符~
標簽1 ~ 標簽2
標簽2必須跟（不一定緊跟）在其同胞標簽1後面。
h1 ~ a {color:purple;}
4、 通用選擇符*
通用選擇符*（常被稱為星號選擇符）是一個通配符，它匹配任何元素。
* p {color:blue;} 這樣只會把p包含的所有元素的文本變成l藍色；
p * {color:black;}會把p標簽下的內嵌標簽a link變成黑色；
a *{color:green;}把所有的a標簽變成綠色。
這個選擇符有一個非常有意思的用法，即用它構成非子選擇符。比如：
section * a {font-size:1.6em;}
任何是section孫子元素，而非子元素的a標簽都會被選中。至於a的父元素是什麼，沒有關係。
