CSS第一章：4.元素关系（兄弟、祖后代关系）；关系选择器

总览

1.元素关系
2.关系选择器

一、元素关系

1.元素关系1：父子
· 父元素：直接包含子元素的元素叫做父元素
· 子元素：直接被父元素包含的元素叫做子元素

2.元素关系2：祖先后代
· 祖先元素：直接或间接包含后代元素的元素叫做祖先元素
· 后代元素：直接或间接被祖先元素包含的元素叫做后代元素

3.元素关系3：兄弟
· 兄弟元素：拥有相同父元素的元素叫做兄弟元素

4.举例说明：

· 父子关系：
div > p1号
div > span2号
p > span1号

· 祖先后代关系：
div 是 p1、span1、span2 的祖先
p1号 是 span1的祖先

· 兄弟关系：
p1 和 span2 是兄弟关系

二、关系选择器

0.关系选择器能够同时多重使用
1.关系选择器1：父子关系选择，运算符：>
1.1 示例：选中父元素是 div 的子元素 span 的全部元素，改颜色为 black

2.关系选择器2：祖先后代关系选择器，运算符：空格
2.1 示例：选中祖先是 div 元素的后代元素 span 的全部元素，改字号为 30px

3.关系选择器3：兄弟关系选择器（只选择一个兄弟元素），运算符：+
3.1 示例：选择p元素下面遇到的第一个span兄弟元素，颜色改为紫色

4.关系选择器4：兄弟关系选择器（选择所有的兄弟元素），运算符：~
4.1 示例：选择p元素的所有的span兄弟元素，颜色改为绿色