CSS复合选择器

复合选择器是什么？

在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器基础之上的，对基本选择器进行组合形成的。

复合选择器可以更准确，更高效地选择目标元素（标签）

复合选择器是由两个或者多个基础选择器，通过不同的方式组合而成的。

常用的复合器包括：后代选择器，子选择器，并集选择器，伪类选择器等等。
1
2
3
4
5

为什么要引入复合选择器？

举例：

要求将ul中的li标签中的元素修改

<head>
    <style>
        li{
                font-size: 20px;
                font-family: "仿宋";
            }
    style>
head>
<body>
    <ul>
        <li>早上好li>
        <li>中午好li>
        <li>下午好li>
    ul>
    <ol>
        <li>你好li>
        <li>我好li>
        <li>大家好li>
    ol>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

类似于上面的这种情况是很常见的，如果我们使用基础选择器，直接使用li标签对齐进行筛选，结果就是如下图所示，无论是ol中的li标签还是ul中的li标签元素都被修改了。

显示：

在这里插入图片描述那么有的人会说，可以使用如下所示这种方式通过类选择器进行，这种方法
虽然没错，但是非常麻烦，十几行代码看不出，但是几十行甚至几百行呢？如果还去手动的添加，效率就非常低。

<head>
    <style>
        .t{
                font-size: 20px;
                font-family: "仿宋";
            }
    style>
head>
<body>
    <ul>
        <li class="t">早上好li>
        <li class="t">中午好li>
        <li class="t">下午好li>
    ul>
    <ol>
        <li>你好li>
        <li>我好li>
        <li>大家好li>
    ol>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

显示：

在这里插入图片描述

此时，复合选择器的好处就体现的淋漓尽致了，下面我们来感受一下它的魅力！

后代选择器：

后代选择器又称为包含选择器，可以选择父元素中的子元素，其写法为：把外层标签写在前面，内层标签写在后面，中间用空格分隔，当标签发生嵌套时，内层标签就成为外层标签的后代。

语法格式：

元素1 元素2{样式声明}//表示选择元素1[称为父元素]中的所有元素2[称为子元素]
1

例如：

ul li{样式声明} //选择ul中所有的li标签元素 
1

注意：

元素1和元素2中间用空格隔开

元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可

元素1和元素2可以是任意基础选择器

举例：

<head>
    <style>
        body .t {//选择body标签中，类选择器为t的元素
            font-family: "仿宋";
        }
    style>
head>

<body>
    <ul>
        <li>我是ul的儿子li>
        <li><a href="http:\\xysfxy.com" />我是ul的孙子a>li>
    ul>
    <p class="t">你好webp>
body >
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

显示如下：

![在这里插入图片描述](https://img-blog.csdnimg.cn/2ac48177fed64360a0ca7f9ceb7315cc.png

选择直接后代元素：

上述实例进行修改：

  <style>
       ul li{
                font-size: 20px;
                font-family: "仿宋";
            }
    style>
1
2
3
4
5
6

对上述实例选用后代选择器，只需要更改几个简单的字母即可，与上述方法中的类选择器相比两者都可正确显示效果，但这种方式方便了许多。

选择非直接后代元素：

举例：

<head>
    <style>
       ul li a{//将ul中的li中的a标签该为红色
                color:aquamarine;
            }
    style>
head>
<body>
    <ul>
        <li >我是ul的儿子li>
        <li><a href="http:\\xysfxy.com"/>我是ul的孙子a>li>
    ul>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13

显示：

在这里插入图片描述

子选择器：

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素，它不像后代选择器一样可以选择“儿子”/"孙子”等，他只能选择“儿子”。

语法格式：

元素1>元素2{样式声明}//选择元素1 里面的所有直接后代元素（子元素）元素2
1

例如：

div>p{样式说明}//选择div里面所有最近一级p标签元素
1

元素1和元素2中间用">"隔开

元素1是父级，元素2是子级，最终选择的是元素2

元素2必须是亲儿子，其余的后代均不可以

举例：

要求：将li中的a标签进行修改：

方法1：

<head>
    <style>
        ul>a{
            font-family: "微软雅黑";
            font-size: 30px;
        }
    style>
head>
<body>
    <ul>
        <li>我是ul的儿子li>
        <li><a href="http:\\xysfxy.com" />我是ul的孙子a>li>
    ul>
body >
1
2
3
4
5
6
7
8
9
10
11
12
13
14

方法1:是错误的，它并不能实现对应的功能，因为 ul>a：a并不是ul的直接后代，所以不能使用子选择器进行选择。

方法2：

<head>
    <style>
        ul>li>a{
            font-family: "微软雅黑";
            font-size: 30px;
        }
    style>
head>
<body>
    <ul>
        <li>我是ul的儿子li>
        <li><a href="http:\\xysfxy.com" />我是ul的孙子a>li>
    ul>
body >
1
2
3
4
5
6
7
8
9
10
11
12
13
14

方法二是对的，ul>li>a：li是ul的后代，而a又是li的后代，因此可以通过子选择器进行修改。

并集选择器：

并集选择器可以选择多组标签，同时为它们定义相同的样式，通常用于集体声明。

并集选择器是各选择器通过英文逗号(,)连接而成，任何形式的选择器都可以作为并集选择器的一部分。

语法格式：

元素1，
元素2{样式声明}//选择元素1和元素2
1
2

在并集选择器中，多个被选择的元素，我们一般都习惯将它们竖着表示，最后一个被选择的元素后面不需要加逗号

例如：

ul,div{样式声明}//选择ul和div标签元素
1

元素1和元素2中间用逗号隔开

举例：

<head>
    <style>
        li,
        p,
        a{//将li和p以及a标签中元素都进行修改
            font-family: "微软雅黑";
            font-size: 10px;
            color:blueviolet
        }
    style>
head>
<body>
    <ul>
        <li>我是ul的儿子li>
    ul>
    <p>我是p标签p>
    <a href="http://us.com">我是超链接a>
body >
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

显示如下：

在这里插入图片描述

伪选择器：

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊的效果，或选择第n个元素。

伪类选择器书写最大的特点是用冒号(:)表示，比如：hover，first-child

常见的伪类选择器有：链接伪类，结构伪类。

链接伪类选择器：

a:link    //选择所有未被访问的链接
a:visited	  //选择所有已被访问的链接
a:hover    //选择鼠标指针位于其上的链接
a:active   //选择活动链接(鼠标按下未弹起的链接）
1
2
3
4

举例：

<style>
a:link{color:black;text-decoration: none;}//未访问过的链接
a:visited{color:aquamarine;}//访问过的链接
a:hover{color:blueviolet;} //鼠标时经过的链接
a:active{color:green;}//鼠标正在按下还为弹起的那个链接
style>
1
2
3
4
5
6

选择链接伪类选择器的注意事项：

1:为了确保生效，必须遵守：link--->visted--->hover--->active的顺序进行定义和声明

2：由于a链接在浏览器中有默认的样式，所以一般情况下都需要我们给a标签指定单独的样式。
1
2
3

链接伪类选择器在实际开发中的写法：

a{
color:gray;
}
a:hover{
color:red;//鼠标经过时，由最初的灰色变为了红色
}
1
2
3
4
5
6

.focus选择器：

将获得光标的input表单元素选取出来

举例：

<head>
    <style>
   input:focus{
    background-color: aquamarine;
   }
    style>
head>
<body>
   <input type="text">
   <input type="text">
body >
1
2
3
4
5
6
7
8
9
10
11

显示效果：

在这里插入图片描述

复合选择器总结：

在这里插入图片描述

相关阅读:
数据结构学习笔记—— 排序算法总结【ヾ(≧▽≦*)o所有的排序算法考点看这一篇你就懂啦！！！】
C语言学习记录（九）之结构体
 【高性能计算】内存结构与优化理论
 机器学习第9天：决策树分类
 L1-071 前世档案(Python3)
网络安全：保护你的系统
 面向个性化需求的在线云数据库混合调优系统 | SIGMOD 2022入选论文解读
 springboot和spring对比
 jvm调优经验总结
 菜鸟网络一面(超详细)
原文地址：https://blog.csdn.net/m0_64365419/article/details/127830401