6-前端笔记-CSS-复合选择器

1、什么是复合选择器

复合选择器由两个及两个以上的基础选择器组合而成。常用的复合选择器包括：
后代选择器、子选择器、并集选择器、伪类选择器

2、后代选择器（**）

也叫包含选择器，可以选择父元素里面的子元素，语法为把外层标签写在前面，内层标签写后面，中间用空格分隔，当标签发生嵌套时，内存标签就是外层标签的后代。
语法：
表示选择元素1里的所有元素2，只对元素2进行样式设置

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

练习：将无序列表中li元素的字体设置为红色

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        ul li{
            color: red;
        }
    style>
head>
<body>
    <ul>
        <li>ul的小lili>
        <li>ul的小lili>
        <li>ul的小lili>
    ul>
    <ol>
        <li>ol的小lili>
        <li>ol的小lili>
        <li>ol的小lili>
    ol>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

在这里插入图片描述

练习2：将第一组的ul设置为红色，第2组无序列表设置为绿色

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        ul li {
            color: red;
        }

        .nav li {
            color: green;
        }
    style>
head>

<body>
    <ul>
        <li>ul的小lili>
        <li>ul的小lili>
        <li>ul的小lili>
    ul>
    <ul class="nav">
        <li>ul的小lili>
        <li>ul的小lili>
        <li>ul的小lili>
    ul>
    <ol>
        <li>ol的小lili>
        <li>ol的小lili>
        <li>ol的小lili>
    ol>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

在这里插入图片描述

3、子选择器（**）

也叫子元素选择器，只能选择作为某元素的最近一级子元素，只能是亲儿子
语法：元素1是父级，元素2是子级

元素1 > 元素2 {
	样式声明
}
1
2
3

练习：设置“亲儿子”的链接字体颜色为红色

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        div>a {
            color: red;
        }
    style>
head>

<body>
    <div>
        <a href="#">亲儿子a>
        <p>
            <a href="#">孙子a>
        p>
    div>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

在这里插入图片描述

3、并集选择器

可以选择多组标签，同时为他们定义相同样式，通常用于集体声明。将各选择器通过英文逗号连接而成，任何形式的选择器都可以成为并集选择器的一部分

元素1,元素2{
	样式声明
}
1
2
3

会改变元素1和元素2的样式
练习：
将熊大一家和小猪佩奇一家字体设置为绿色

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        div>p,
        span,
        ul li {
            color: green;
        }
    style>
head>

<body>
    <div>
        <p>熊大p> <br />
        <span>🐻二span>
    div>
    <p>光头强p>
    <ul>
        <li>小猪佩奇li>
        <li>小猪爸爸li>
        <li>小猪妈妈li>
    ul>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

在这里插入图片描述

4、伪类选择器

用于向某些选择器添加特殊效果，比如给链接添加特殊效果，或选择第一个，第n个元素
用冒号（:）表示
分类：链接伪类、focus伪类

4.1 链接伪类

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

注意事项：
为确保生效，按照LVHA的顺序声明,不止是a标签可以，其他标签也可用，一般常用到a标签上
先写a{},再写a:hover

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        a{
            text-decoration: none;
        }
        a:link{
            color: black;
        }
        a:visited{
            color: brown;
        }
        a:hover{
            color: green;
        }
        a:active{
            color: yellow;
        }
         p:hover{
            color: blueviolet;
        }
    style>
head>
<body>
    <a href="#">点击跳转a>
    <p>sssp>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

在这里插入图片描述

4.2 focus 伪类选择器

:focus伪类选择器，用于选取获得焦点的表单元素
一般情况input类表单元素才能获取，因此这个选择器也主要针对表单元素来说

input:foucus{
	background-color:yellow;
}
1
2
3

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        input:focus{
            color: green;
            background: pink;
        }
    style>
head>
<body>
    <input type="text">身份证
    <input type="text">姓名
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在这里插入图片描述

相关阅读:
五、Qt中的常用类
 oracle plsql如何debug触发器
 Opengl之立方体贴图
 【PyTorch教程】03-张量运算详细总结
 2022-08-12 Linux下epoll模型-高性能网络IO
矢量图形编辑软件 illustrator 2023 mac 中文软件特点
 应急监管双重预防机制数字化管理解决方案
 Cannot connect to the Docker
计算机网络五传输层
 Linux（Nginx）
原文地址：https://blog.csdn.net/Ambition_ZM/article/details/128022292