CSS复合选择器（一）

- 1.交集选择器
- 2. 并集选择器
- 3. 后代选择器
- 4. 子代选择器
- 5.兄弟选择器
- - 5.1相邻兄弟选择器：
  - 5.2通用兄弟选择器：
- 6.属性选择器

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.属性选择器

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

语法：

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

举例：

/* 选中具有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;}