在这里插入图片描述

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

1.4.3 示例

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

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

    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
</body>

css

<style>
	/* 选择ul中的li */
    ul li {
        color: red;
    }
</style>

效果

1.5 子选择器

1.5.1 定义

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

1.5.2 语法

css

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

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

1.5.3 示例

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

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

    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
</body>

css

<style>
    /* 选择ol中的li */
    ol>li {
        color: red;
    }
</style>

效果

1.6 并集选择器

1.6.1 定义

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

1.6.2 语法

css【一般不这么写】

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

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

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

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

1.6.3 示例

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

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

    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
</body>

css

<style>
    ul>li,
    ol>li {
        color: red;
    }
</style>

效果

1.7 伪类选择器

1.7.1 定义

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

1.7.2 链接伪类选择器

语法

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

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

1.7.3 示例

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

css

<style>
    /* 未访问为黑色 */
    a:link {
        color: black;
    }

    /* 访问后为红色 */
    a:visited {
        color: red;
    }

    /* 悬浮时为绿色 */
    a:hover {
        color: green;
    }

    /* 点击按住不动为蓝色 */
    a:active {
        color: blue;
    }
</style>

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

1.7.4 focus伪类选择器

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

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

语法

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

1.7.5 示例

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

<body>
    <form action="">
        <input type="text">
        <input type="text">
        <input type="text">
    </form>
</body>

css

<style>
    input:focus {
        background-color: red;
    }
</style>

效果（点哪红哪）

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

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

本文含有隐藏内容，请开通VIP 后查看

css之复合选择器

文章目录