CSS：选择器-复合选择器

文章目录

- 1、HTML元素间的关系
- 2、交集选择器
- 3、并集选择器（分组选择器）
- 4、后代选择器
- 5、子代选择器
- 6、兄弟选择器
- 7、属性选择器
- 8、伪类选择器(较难)
- - 8.1、动态伪类
  - 8.2.、结构伪类

1、HTML元素间的关系

①父元素、②子元素、③祖先元素、④后代元素、⑤兄弟元素。
在这里插入图片描述

2、交集选择器

    <style>/* 选中类名为rich的元素*/.rich {color: gold;}/* 选中类名为beauty的元素*/.beauty {color: red;}/* 选中类名为beauty的p元素，这种形式（元素配合类选择器）以后用的很多！！ */p.beauty {color: green;}/* 选中同时具备rich和beauty类名的元素 */.rich.beauty {color: orange;}</style>
</head>
<body><h2 class="rich">土豪张三</h2><h2 class="beauty">明星李四</h2><h2 class="rich beauty">土豪明星王五</h2><hr><p class="beauty">小狗旺财</p><p class="beauty">小猪佩奇</p>
</body>

3、并集选择器（分组选择器）

        /* 选中类名为：rich或beauty或dog或pig或id为suxi的元素*/.rich,.beauty,.dog,.pig,#suxi {font-size: 40px;background-color: gray;width: 180px;}

4、后代选择器

在这里插入图片描述

5、子代选择器

在这里插入图片描述

<head><meta charset="UTF-8"><title>04_子代选择器</title><style>div>a {color: red;}div>p>a{color: skyblue;}.foot>a {color: chocolate;}</style>
</head>
<body><div><a href="#">张三</a><a href="#">李四</a><a href="#">王五</a><p><a href="#">赵六</a><div class="foot"><a href="#">孙七</a></div></p></div>
</body>

6、兄弟选择器

1、相邻兄弟元素
在这里插入图片描述
2、所有兄弟元素

7、属性选择器

一般不用属性选择器选择 class和id 属性元素。
在这里插入图片描述

8、伪类选择器(较难)

在这里插入图片描述
在原有选择器的基础上，进一步添加选择器的状态。

8.1、动态伪类

其中，:link，:visited只用于a标签
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>08_伪类选择器_动态伪类</title><style>/* 选中的是没有访问过的a元素 */a:link {color: orange;}/* 选中的是访问过的a元素 */a:visited {color: gray;}/* 选中的是鼠标悬浮状态的a元素 */a:hover {color: skyblue;}/* 选中的是激活状态的a元素 */a:active {color: green;}/* 选中的是鼠标悬浮的span元素 */span:hover {color: green;}/* 选中的是激活的span元素 */span:active {color: red;}/* 选中的是获取焦点状态的input元素、获取焦点状态的select元素 */input:focus,select:focus {color: orange;background-color: green;}</style>
</head>
<body><a href="https://www.baidu.com">去百度</a><a href="https://www.jd.com">去京东</a><span>尚硅谷</span><br><input type="text"><br><input type="text"><br><input type="text"><select><option value="beijing">北京</option><option value="shanghai">上海</option></select>
</body>
</html>

8.2.、结构伪类

n=an+b
在这里插入图片描述

    <style>/* 选中的是div的第一个儿子且是p元素（按照所有兄弟计算的） —— 看结构1 */div>p:first-child {color: red;}/* 选中的是div的第一个儿子且是p元素（按照所有兄弟计算的） —— 看结构2 */div>p:first-child {color: red;}/* 选中的是div的后代p元素，且p的父亲是谁无所谓，但p必须是其父亲的第一个儿子（按照所有兄弟计算的） —— 看结构3 */div p:first-child {color: red;} /* 选中的是p元素，且p的父亲是谁无所谓，但p必须是其父亲的第一个儿子（按照所有兄弟计算的） —— 看结构3 */p:first-child {color: red;}--------------------------------------------------------------------------------------------/* 选中的是div的第一个儿子p元素（按照所有兄弟计算的）—— 结构1*/div>p:first-child {color: red;}/* 选中的是div的最后一个儿子p元素（按照所有兄弟计算的）—— 结构1*/div>p:last-child {color: red;}/* 选中的是div的第n个儿子p元素（按照所有兄弟计算的）—— 结构1 */div>p:nth-child(3) {color: red;}/* 选中的是div的偶数个儿子p元素（按照所有兄弟计算的）—— 结构2 *//* 关于n的值 —— 结构2：1. 0或不写：什么都选不中 —— 几乎不用。2. n ：选中所有子元素  —— 几乎不用。3. 1 ~ 正无穷的整数，选中对应序号的子元素。4. 2n 或 even  ：选中序号为偶数的子元素。5. 2n+1 或 odd ：选中序号为奇数的子元素。6. -n+3 : 选中前三个。*/div>p:nth-child(2n) {color: red;}/* 选中的是div的第一个儿子p元素（按照所有同类型兄弟计算的）—— 结构3 */div>p:first-of-type{color: red;}/* 选中的是div的最后一个儿子p元素（按照所有同类型兄弟计算的）—— 结构3 */div>p:last-of-type{color: red;}/* 选中的是div的第n个儿子p元素（按照所有同类型兄弟计算的）—— 结构3 */div>p:nth-of-type(5) {color: red;}---------------------------------------------------------------------------------------------/* 选中的是div的儿子p元素，但排除第一个儿子p元素 */div>p:not(:first-child) {color: red;}</style>