1. 概述
HTML 文档是一个树状的结构，因此 HTML 元素之间存在位置关系，如父子关系、祖孙关系、相邻关系。如何利用这种位置关系来选择元素呢？ CSS 的解决方法是采用组合选择器。
组合选择器的格式为：
E 组合操作符 F
其中 E 和 F 是简单选择器或级联选择器。他们通过组合操作符连接起来。
目前 CSS 支持4种组合操作符：>、空格、+、~。这4种组合操作符代表了4种关系，并产生了4种组合选择器。
四种组合选择器：
- 儿子选择器 (Child Selector)
- 儿孙选择器 (Descendant Selector)
- 长弟选择器 (Next-sibling Selector)
- 弟弟选择器 (Subsequent-sibling Selector)
2. 儿子选择器 (>)
儿子选择器用于选择一个元素的所有儿子元素。
语法
E > F
说明
儿子选择器的选择目标是 F 元素，且 F 元素的父亲是 E 元素。E 和 F 用 > 相连。
比如 div > p{color:red} 规则，选择器 div > p 将选择 p 元素，并且p 元素的父亲是 div 元素。
再比如 div.note > p{color:red} 规则，选择器 div.note > p 将选择 p 元素，并且 p 元素的父亲是 div 元素，并且 div 元素使用了 note 类。
示例
选择 body 元素的所有儿子级别的 p 元素，并将其文本颜色设置为红色。
HTML + CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <html> <head> <meta charset="utf-8"/> <style type="text/css"> body > p {color:red;} </style> </head> <body> <p>松下问童子，</p> <p>言师采药去。</p> <div> <p>只在此山中，</p> </div> <p>云深不知处。</p> </body> </html> |
效果
松下问童子，
言师采药去。
只在此山中，
云深不知处。
3. 儿孙选择器 ( 空格 )
儿孙选择器用于选择一个元素的所有的晚辈元素，包括儿子元素、孙子元素、重孙元素，以及更深层次的晚辈元素。
语法
E 空格 F
说明
儿孙选择器的选择目标是 F 元素，且 F 元素的祖先元素至少有一个是 E 元素。E 和 F 之间用空格相连。
比如 div p{color:red} 规则，选择器 div p 将选择 p 元素，并且 p 元素的祖先元素至少有一个是 div 元素。
再比如 div.note > p span{color:red} 规则，选择器 div.note > p span 将选择 span 元素，这些 span 元素是 p 元素的儿子元素，同时 p 元素又是使用了 note 类的 div 元素的晚辈元素。
示例
选择 body 元素包含的所有 p 元素，并将它们的文本颜色设置为红色。
HTML + CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <html> <head> <meta charset="utf-8"/> <style type="text/css"> body p {color:red;} </style> </head> <body> <p>松下问童子，</p> <p>言师采药去。</p> <div> <p>只在此山中，</p> </div> <p>云深不知处。</p> </body> </html> |
效果
松下问童子，
言师采药去。
只在此山中，
云深不知处。
4. 长弟选择器 (+)
长弟选择器用于选择一个元素的第一个弟弟元素。
语法
E + F
说明
长弟选择器的选择目标是 F 元素，且 F 元素上方的第一个兄弟元素是 E 元素 。E 和 F 之间用 + 相连。
比如 h1 + p{color:red} 规则，选择器 h1 + p 将选择 p 元素，且 p 元素相邻的上方兄弟节点是 h1 元素。
示例
将紧挨着 h2 元素的 p 元素的文本颜色设置为红色。
HTML + CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 | <html> <head> <meta charset="utf-8"/> <style type="text/css"> h2 + p {color:red;} </style> </head> <body> <h2>谁是我的第1个弟弟？</h2> <p>我是第1个弟弟</p> <p>我是第2个弟弟</p> </body> </html> |
效果
谁是我的第1个弟弟？
我是第1个弟弟
我是第2个弟弟
5. 弟弟选择器 (~)
弟弟选择器用于选择一个元素的所有弟弟元素。
语法
E ~ F
说明
弟弟选择器的选择目标是 F 元素，且 F 元素上方的兄弟元素中至少有一个是 E 元素。 E 和 F 之间用 ~ 相连。
比如 h1 ~ p{color:red} 规则，选择器 h1 ~ p 将选择 p 元素，且 p 元素上方兄弟元素中至少有一个是 h1 元素。
示例
将 h2 元素所有弟弟级别的 p 元素的文本颜色设置为红色。
HTML + CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 | <html> <head> <meta charset="utf-8"/> <style type="text/css"> h2 ~ p {color:red;} </style> </head> <body> <h2>谁是我的弟弟？</h2> <p>我是第1个弟弟</p> <p>我是第2个弟弟</p> </body> </html> |
效果
谁是我的弟弟？
我是第1个弟弟
我是第2个弟弟
