CSS复合选择器（一）

1.交集选择器

• 作用：选中同时符合多个条件的元素。

交集有并且的含义（通俗理解：即…又… 的意思），例如：年轻且长得帅。

• 语法：选择器1选择器2选择器3…选择器n {}
• 举例：

/* 选中：类名为beauty的p元素，为此种写法用的非常多！！！！ */
p.beauty {
	color: blue;
}
/* 选中：类名包含rich和beauty的元素 */
.rich.beauty {
	color: green;
}

注意：

• 有标签名，标签名必须写在前面。
• id 选择器、通配选择器，理论上可以作为交集的条件，但实际应用中几乎不用 —— 因为没
  有意义。
• 交集选择器中不可能出现两个元素选择器，因为一个元素，不可能即是 p 元素又是 span 元
  素。
• 用的最多的交集选择器是：元素选择器配合类名选择器，例如： p.beauty 。

2. 并集选择器

• 作用：选中多个选择器对应的元素，又称：分组选择器。

所谓并集就是或者的含义（通俗理解：要么…要么… 的意思）
例如：给我转10万块钱 或者我报警。

• 语法：选择器1, 选择器2, 选择器3, … 选择器n {}

多个选择器通过 , 连接，此处 , 的含义就是：或。

• 举例：

/* 选中id为peiqi，或类名为rich，或类名为beauty的元素 */
	#peiqi,
	.rich,
	.beauty {
		font-size: 40px;
		background-color: skyblue;
		width: 200px;
	}

注意：

• 并集选择器，我们一般竖着写。
• 任何形式的选择器，都可以作为并集选择器的一部分 。
• 并集选择器，通常用于集体声明，可以缩小样式表体积。

3. 后代选择器

• 作用：选中指定元素中，符合要求的后代元素。
• 语法：选择器1 选择器2 选择器3 … 选择器n {} （先写祖先，再写后代）

选择器之间，用空格隔开，空格可以理解为：" xxx 中的"，其实就是后代的意思。
选择器 1234…n ，可以是我们之前学的任何一种选择器。

• 举例：

/* 选中ul中的所有li */
ul li {
	color: red;
}
/* 选中ul中所有li中的a */
ul li a {
	color: orange;
}
/* 选中类名为subject元素中的所有li */
.subject li {
	color: blue;
}
/* 选中类名为subject元素中的所有类名为front-end的li */
.subject li.front-end {
	color: blue;
}

注意：

• 后代选择器，最终选择的是后代，不选中祖先。
• 儿子、孙子、重孙子，都算是后代。
• 结构一定要符合之前讲的 HTML 嵌套要求，例如：不能 p 中写 h1 ~ h6 。

4. 子代选择器

• 作用：选中指定元素中，符合要求的子元素（儿子元素）。（先写父，再写子）

子代选择器又称：子元素选择器、子选择器。

• 语法：选择器1 > 选择器2 > 选择器3 > … 选择器n {}

选择器之间，用 > 隔开， > 可以理解为：" xxx 的子代"，其实就是儿子的意思。
选择器 1234…n ，可以是我们之前学的任何一种选择器。

• 举例：

/* div中的子代a元素 */
div>a {
  color: red;
}
/* 类名为persons的元素中的子代a元素 */
.persons>a{
  color: red;
}

注意：

• 子代选择器，最终选择的是子代，不是父级。
• 子、孙子、重孙子、重重孙子 … 统称后代！，子就是指儿子。

5.兄弟选择器

5.1相邻兄弟选择器：

• 作用：选中指定元素后，符合条件的相邻兄弟元素。

所谓相邻，就是紧挨着他的下一个，简记：睡在我下铺的兄弟。

• 语法： 选择器1+选择器2 {} 。
• 示例：

/* 选中div后相邻的兄弟p元素 */
div+p {
   color:red;
}

5.2通用兄弟选择器：

• 作用：选中指定元素后，符合条件的所有兄弟元素。（简记：睡在我下铺的所有兄弟）
• 语法： 选择器1~选择器2 {} 。
• 实例：

/* 选中div后的所有的兄弟p元素 */
div~p {
   color:red;
}

• 注意：两种兄弟选择器，选择的是下面的兄弟。

6.属性选择器

作用：选中属性值符合一定要求的元素。

语法：

1. [属性名] 选中具有某个属性的元素。
2. [属性名=“值”] 选中包含某个属性，且属性值等于指定值的元素。
3. [属性名^=“值”] 选中包含某个属性，且属性值以指定的值开头的元素。
4. [属性名$=“值”] 选中包含某个属性，且属性值以指定的值结尾的元素。
5. [属性名*=“值”] 选择包含某个属性，属性值包含指定值的元素。

举例：

/* 选中具有title属性的元素 */
	div[title]{color:red;}
	
/* 选中title属性值为atguigu的元素 */
	div[title="atguigu"]{color:red;}
	
/* 选中title属性值以a开头的元素 */
	div[title^="a"]{color:red;}

/* 选中title属性值以u结尾的元素 */
	div[title$="u"]{color:red;}

/* 选中title属性值包含g的元素 */
	div[title*="g"]{color:red;}