css之复合选择器

在这里插入图片描述

1. 复合选择器

1.1 定义

在 css 中，选择器可以分为基础选择器和复合选择器，复合选择器是由基础选择器组合而成，从而更准确、更高效选择目标元素。

1.2 分类

复合选择器可以分为：后代选择器、子选择器、并集选择器、伪类选择器等

1.3 元素分类

根据元素的包含关系，我们将元素可以分为：父元素、子元素、祖先元素、后代元素。

在这里插入图片描述

<table> 元素是其他元素的祖先元素，也就是说 <thead>、<tbody>、<tr>、<th>、<td> 元素都是他的后代。

并且 <table> 是 <thead> 和 <tbody> 元素的父元素，所以他们是 <table> 的子元素。

同理，<thead> 是 <tr> 的父元素，<tr> 是 <thead> 的子元素。

1.4 后代选择器

1.4.1 定义

后代选择器可以选择祖先元素的后代元素，中间用空格间隔。

1.4.2 语法

css

祖先元素 后代元素1 后代元素2 {
    属性1: 属性值1;
    属性2: 属性值2;
}
1
2
3
4

注意点
1. 祖先元素和后代元素之间需要用空格隔开
2. 如上面语法所示，后代元素1其实也是后代元素2的祖先元素，也就是说必须满足从祖先元素到后代元素的过渡，也就是不能使用同级元素。
3. 祖先元素可以直接到后代元素2，不一定要写后代元素1，写是为了更精准的选择和能帮助我们更容易找到其控制位置。
4. 祖先元素和后代元素可以是任意的基础选择器

1.4.3 示例

html（要求让 ul 里的 li 字体颜色为红色）

<body>
    <ul>
        <li>1li>
        <li>2li>
        <li>3li>
    ul>

    <ol>
        <li>1li>
        <li>2li>
        <li>3li>
    ol>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13

css

效果

1.5 子选择器

1.5.1 定义

子选择器可以选择父元素内的子元素，元素与元素之间使用 >。

1.5.2 语法

css

父元素>子元素 {
    属性1: 属性值1;
    属性2: 属性值2;
}
1
2
3
4

注意点
1. 父元素和子元素之间需要用 > 隔开
2. 父元素和子元素可以是任意的基础选择器

1.5.3 示例

html（要求让 ol 里的 li 字体颜色为红色）

<body>
    <ul>
        <li>1li>
        <li>2li>
        <li>3li>
    ul>

    <ol>
        <li>1li>
        <li>2li>
        <li>3li>
    ol>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13

css

效果

1.6 并集选择器

1.6.1 定义

并集选择器可以选择多组元素，同时定义相同的样式。元素与元素用 , 隔开。

1.6.2 语法

css【一般不这么写】

元素1,元素2 {
    属性1: 属性值1;
    属性2: 属性值2;
}
1
2
3
4

语法规范一般会竖着写（自动格式化保存会调整格式）

元素1,
元素2 {
    属性1: 属性值1;
    属性2: 属性值2;
}
1
2
3
4
5

注意点
1. 元素1和元素2之间需要用 , 隔开
2. 逗号可以为和的意思

1.6.3 示例

html（要求用并集选择器让 ul 和 ol 里的 li 字体颜色同时为红色）

<body>
    <ul>
        <li>1li>
        <li>2li>
        <li>3li>
    ul>

    <ol>
        <li>1li>
        <li>2li>
        <li>3li>
    ol>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13

css

效果

1.7 伪类选择器

1.7.1 定义

伪类选择器主要用来给一些选择器添加特殊效果🎆，比如给链接添加特殊效果，或者选择第一个，第n个元素。它用冒号（:）表示。

1.7.2 链接伪类选择器

语法

a:link /* 超链接未访问时的状态 */
a:visited /* 超链接访问后的状态 */
a:hover /* 悬停状态 */
a:active /* 激活状态（按住鼠标不松开） */
1
2
3
4

注意点
1. 一定要按顺序声明，口诀：爱恨法则（love：link、visited，hate：hover，active）
2. 因为 a 链接在浏览器具有默认样式，所以我们经常会用到该选择器

1.7.3 示例

html（要求让 a 未访问为黑色，鼠标停留时为绿色，点击按住不动为蓝色，访问后为红色）
```
<body>
    <a href="#">百度a>
body>
1
2
3
```

css

效果
- 未访问
- 悬浮
- 点击按住不动
- 已访问

1.7.4 focus 伪类选择器

focus 伪类选择器用来选取获取焦点（光标）的表单元素。

一般该选择器只用于表单元素。

语法

input:focus {
	属性1: 属性值1;
    属性2: 属性值2;
}
1
2
3
4

1.7.5 示例

html（要求点到哪个输入框就使其背景为红色）

<body>
    <form action="">
        <input type="text">
        <input type="text">
        <input type="text">
    form>
body>
1
2
3
4
5
6
7

css

效果（点哪红哪）

本文主要学习黑马程序员pink老师的视频

如有错误，敬请指正，欢迎交流🤝，谢谢♪(･ω･)ﾉ

相关阅读:
CentOS8编译安装curl 7.84.0
SSH命令详解
使用 ROS2 为您自己的机器人创建 Gazebo 模拟
真实网络设备的（基本登录+命令配置+相关文件级操作系统的删除和保存）
ElasticSearch从入门到精通--第五话（整合SpringBoot高效开发、分页高亮等、Kibana使用篇）
Vue实现复制粘贴功能
Windows下对于Qt中带 / 的路径的处理
Linux的进程管理
leetcode每天5题-Day55-动态规划1
长胜证券：三大拐点共振看好智能驾驶新一轮行情

原文地址：https://blog.csdn.net/m0_51302822/article/details/127681537