css中级选择器

1.1 派生选择器(子类选择器)

a.语法

选择器a 选择器b{
    样式名1:样式值1;
    样式名2:样式值2;
    ..........
}
/*
寻找的范围是选择器a里面的所有标签，无论是儿子还是孙子,只要标签名与选择器b能匹配的上,那么就会对它进行更改样式
*/
1
2
3
4
5
6
7
8

b.不加派生选择器的效果

在这里插入图片描述

c.加派生选择器的效果

在这里插入图片描述

d.源码

<!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>中级选择器的应用</title>
    <style type="text/css">
        div span{
            color: orange;
        }
    </style>
</head>
<body>
    <div id="box">
        <span>早安</span>
        <div>
            <span>各位</span>
        </div>
      </div>
      <span>祝你好运</span>
</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

2.2 直接子类选择器

a.语法

选择器a > 选择器b{
  样式名1:样式值1;
  样式名2:样式值2;
  ..........
}
/*
其中选择的是a里面的所有儿子(第一层)与b去进行比较,若符合就进行相应的css操作
*/
1
2
3
4
5
6
7
8

b.不加直接选择器的效果

在这里插入图片描述

c.加直接选择器的效果

在这里插入图片描述

d.源码

<!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>中级选择器的应用</title>
    <style type="text/css">
        div > span{
            color: orangered;
        }
    </style>
</head>
<body>
    <div id="box">
        <span>早安</span>
        <div>
            <p>
                <span>各位</span>
            </p>        
        </div>
        <p>每个人都是一个潜力股</p>
        <span>Good luck</span>
        <p>我们的是最棒的</p>
        <p>我们的是最牛的</p>
      </div>
      <span>祝你好运</span>    
</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

2.3 分组选择器

a.语法

/*
  使用场景:不同标签具有相同样式的去使用
*/
选择器a,选择器b{
    样式名1:样式值1;
    样式名2:样式值2;
}
/*
会找到选择器a,选择器b所对应的所有标签,一起给它们设置样式值
*/
1
2
3
4
5
6
7
8
9
10

b.不加分组选择器的效果

在这里插入图片描述

c.加分组选择器的效果

在这里插入图片描述

d.源码

<!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>中级选择器的应用</title>
    <style type="text/css">
        span,p{
            color: orangered;
        }
    </style>
</head>
<body>
    <div id="box">
        <span>早安</span>
        <div>
            <span>各位</span>
        </div>
        <span>Good luck</span>
        <p>我们的是最棒的</p>
      </div>
      <span>祝你好运</span>
</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

2.4 兄弟选择器

a.语法

选择器a+选择器b{
    样式名1:样式值1;
    样式名2:样式值2;
}
/*
  直会选择选择器a所找到的所有标签的临近(右边)的第一个元素(有且只有一个)
*/
1
2
3
4
5
6
7

b.不加兄弟选择器的效果

在这里插入图片描述

c.加兄弟选择器的效果

在这里插入图片描述

d.源码

<!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>中级选择器的应用</title>
    <style type="text/css">
        span+p{
            color: orangered;
        }
    </style>
</head>
<body>
    <div id="box">
        <span>早安</span>
        <div>
            <span>各位</span>
        </div>
        <p>每个人都是一个潜力股</p>
        <span>Good luck</span>
        <p>我们的是最棒的</p>
        <p>我们的是最牛的</p>
      </div>
      <span>祝你好运</span>    
</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

相关阅读:
EasyOCR简单实用
 (二) gitblit用户使用教程
 nginx配置反向代理和动静分离应用
 Vim实用技巧_3.可视模式和命令模式
 尚品汇 - 项目个人笔记总汇（更新中...）
.NET Framework中自带的泛型委托Action
java-net-php-python-ssm房产信息管理系统计算机毕业设计程序
 秋招校招，什么是群面？
陕西省助理评审申报，看这文章就够了
 c++ Makefile clion ide remote构建
原文地址：https://blog.csdn.net/SSS4362/article/details/125438216