1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>HTML5 Template</title> 6 <style> 7 em {color:gray;} 8 article p em{color:green;} 9 aside p em{color:orange;} 10 </style> 11 </head> 12 <body> 13 <p>this text is very important!</p> 14 <article> 15 <h1>Contextual selector are <em>very</em> selective</h1> 16 <p>this example shows how to target a <em>specific</em> tag.</p> 17 </article> 18 <aside> 19 <p>Contextual selectors are <em>very</em> useful!</p> 20 </aside> 21 </body> 22 </html>
1、上下文選擇器：基於祖先或者同胞元素選擇一個元素。
標簽1 標簽2 {聲明}
其中，標簽2是我們想要選中的目標，而且只有在標簽1是其祖先元素的情況下才會被選中。
上下文選擇器，嚴格來講，叫后代組合式選擇器，就是一組以空格分隔的標簽名。用於選擇作為指定祖先元素后代的標簽。只要有標簽在它的層次結構“上游”存在這么一個祖先，那么就會選中該標簽。無論從該標簽到作為祖先的上下文之間隔着多少層次都沒有關系。
上面的例子表示的是，基於祖先元素選擇em元素，使處於不同標簽下的em呈現不同的狀態。
特殊的上下文選擇符：
1.1、子選擇符>
標簽1 > 標簽2
標簽2必須是標簽1的子元素。與其他常規的上下文選擇符不同，這個選擇符中的標簽1不能使標簽2的父元素之外的其他祖先元素
1.2、緊鄰同胞選擇符 +
標簽1 + 標簽2
標簽2必須緊跟在其同胞標簽1的后面
1.3、一般同胞選擇符 ~
標簽1 ~ 標簽2
標簽2必須在（不一定緊挨着）其同胞標簽1后面
1.4、通用選擇符 *
*（常稱為星號選擇符）是一個通配符，它匹配任何元素
* {color:green;}
會導致所有元素（的文本和邊框）都變成綠色。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>HTML5 Template</title> 6 <style> 7 section > h2 {color:red;font-style:italic;}/* > 子選擇符 */ 8 h2 + p {font-variant:small-caps;}/* + 緊鄰同胞選擇符*/ 9 h2 ~ a {color:brown;}/* ~ 一般同胞選擇符*/ 10 section * a {color:red;}/*非子選擇符，適用於section的非子元素a*/ 11 </style> 12 </head> 13 <body> 14 <section> 15 <h2>An H2 Heading</h2> 16 <p>this is paragraph 1</p> 17 <p>paragraph 2 has <a href="#">a link</a> in it.</p> 18 <a href="#">Link</a> 19 </section> 20 </body> 21 </html>
