3-关系选择器

一、交集选择器

• 交集选择器又称标签指定式选择器，由两个选择器构成，其中第一个为标记选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格。
• 作用：给所有选择器选中的标签中, 相交的那部分标签设置属性
• 语法格式：选择器1选择器2{ 属性: 值;}

注意点:

• 选择器和选择器之间没有任何的连接符号
• 选择器可以使用标签名称/id名称/class名称
• 交集选择器仅仅作为了解, 企业开发中用的并不多

二、并集选择器

• 并集选择器是各个选择器通过逗号（ ，）连接而成的，任何形式的选择器（包括标记选择器、class类选择器、id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为他们定义相同的CSS样式。
• 作用: 给所有选择器选中的标签设置属性
• 语法格式:选择器1,选择器2{ 属性:值;}

注意

• 并集选择器必须使用,来连接
• 选择器可以使用id名称/标签名称/class名称

三、后代选择器

• 后代选择器用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。
• 作用： 找到指定标签的所有特定的后代标签, 设置属性
• 格式:标签名称1 标签名称2{ 属性:值;}
  先找到所有名称叫做"标签名称1"的标签, 然后再在这个标签下面去查找所有名称叫做"标签名称2"的标签, 然后再设置属性

注意:

• 后代选择器必须用空格隔开
• 后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代
• 后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器
• 后代选择器可以通过空格一直延续下去

四、子代选择器

• 子代选择器主要用来选择某个元素的第一级子元素
• 作用：找到指定标签中所有特定的直接子元素, 然后设置属性
• 语法格式：标签名称1>标签名称2{ 属性:值;}
• 先找到所有名称叫做"标签名称1"的标签, 然后在这个标签中查找所有直接子元素名称叫做"标签名称2"的元素

注意点:

• 子元素选择器只会查找儿子, 不会查找其他被嵌套的标签
• 子元素选择器之间需要用>符号连接, 并且不能有空格
• 子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器
• 子元素选择器可以通过>符号一直延续下去

五、后代和子代选择器

后代选择器和子代元素选择器之间的不同点：

1.后代选择器使用空格作为连接符号，子代元素选择器使用>作为连接符号
2.后代选择器会选中指定标签中, 所有的特定后代标签, 也就是会选中儿子/孙子…, 只要是被放到指定标签中的特定标签都会被选中；子代元素选择器只会选中指定标签中, 所有的特定的直接标签, 也就是只会选中特定的儿子标签

后代选择器和子代元素选择器之间的共同点

1. 后代选择器和子代元素选择器都可以使用标签名称/id名称/class名称来作为选择器
2. 后代选择器和子代元素选择器都可以通过各自的连接符号一直延续下去 选择器1>选择器2>选择器3>选择器4{}

六、兄弟选择器

1 临近兄弟选择器
- 该选择器使用加号“+”来链接前后两个选择器。选择器中的两个元素有同一个父亲，而且第二个元素必须紧跟第一个元素。
- 作用：给指定标签后面紧跟的那个标签设置属性
- 语法格式：选择器1+选择器2{ 属性:值;}

注意点:

• 相邻兄弟选择器必须通过+连接
• 相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签

2 通用兄弟

• 选择器中的两个元素有同一个父亲，但第二个元素不必紧跟第一个元素
  什么是通用兄弟选择器 CSS3
• 作用: 给指定选择器后面的所有选择器选中的所有标签设置属性
• 语法格式：选择器1~选择器2{ 属性:值;}

注意:

• 通用兄弟选择器必须用~连接
• 通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中