CSS3----关系（层次）选择器
1、代码：
包含选择符（Descendant）
选取在div1内包含的li元素
Sunlike阿理旺旺
- Sunlike阿理旺旺
- Sunlike阿理旺旺
- Sunlike阿理旺旺
- Sunlike阿理旺旺
.div1 li {
color: red; }效果：
1、包含（后代）选择符（Descendant combinator）
选取在div1内包含的li元素
Sunlike阿理旺旺
- Sunlike阿理旺旺
- Sunlike阿理旺旺
-
- Sunlike阿理旺旺
- Sunlike阿理旺旺
结论：包含选择符选中的内容是：直接或间接包含的内容
2、代码：
子选择器（Child combinator）
选择所有作为div2的子元素ul
Sunlike阿理旺旺
- Sunlike阿理旺旺
- Sunlike阿理旺旺
- Sunlike阿理旺旺
- Sunlike阿理旺旺
- Sunlike阿理旺旺
- Sunlike阿理旺旺
.div2>ul {
color: gray; }
效果：
子选择符（Child combinator）
选择所有作为div2的子元素ul
Sunlike阿理旺旺
- Sunlike阿理旺旺
- Sunlike阿理旺旺
-
- Sunlike阿理旺旺
- Sunlike阿理旺旺
- Sunlike阿理旺旺
- Sunlike阿理旺旺
结论：子选择符，选中的是直接的儿子，后代不算
3、代码：
子选择器（Child combinator）
选择所有作为div2的子元素ul
Sunlike阿理旺旺
- Sunlike阿理旺旺
- Sunlike阿理旺旺
- Sunlike阿理旺旺
- Sunlike阿理旺旺
- Sunlike阿理旺旺
- Sunlike阿理旺旺
.div3-1+div {
color: red; }
效果：
相邻兄弟选择符（Adjacent combinator）
选择紧贴在选择的元素之后的元素
div3-1 Sunlike阿理旺旺
div3-2 Sunlike阿理旺旺
div3-3 Sunlike阿理旺旺
结论：选择相邻的元素
4、代码：
相邻选择器（Adjacent combinator）
选择紧贴在选择的元素之后的元素
div3-1 Sunlike阿理旺旺div3-2 Sunlike阿理旺旺div3-3 Sunlike阿理旺旺兄弟选择器（General combinator）
选择该元素所有兄弟元素
div4-1 Sunlike阿理旺旺div4-2 Sunlike阿理旺旺div3-3 Sunlike阿理旺旺
.div4-1~div {
color: red; }
效果：
通用兄弟选择符（General combinator）
选择该元素所有兄弟元素
div4-1 Sunlike阿理旺旺
div4-2 Sunlike阿理旺旺
div3-3 Sunlike阿理旺旺
结论：选择所有兄弟元素