css基本选择器

css选择器

基本选择器

1 标签选择器

a.语法

标签名{
   样式名1:样式值1;
   样式名2:样式值2;
}
/* 
  这个是对所有相同标签名的标签进行美化操作
*/
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{
          color: brown;
        }
    </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 类选择器

a.语法

(先在标签里面新建class属性并对其赋值)

.class值{
    样式1:样式值1
    样式2:样式值2
    样式3:样式值3
    .....
}
1
2
3
4
5
6

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">
        .f{
          color: seagreen;
        }
    </style>
</head>
<body>
      <div id="box">
        <span class="f">早安</span>
        <div>
            <span class="f">各位</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

3 id选择器

a.语法(先给标签设置id属性)

#id值{
  样式名1:样式值1;
  样式名2:样式值2;
  ....
}
1
2
3
4
5

b.不加id选择器的效果

在这里插入图片描述

c.加id选择器的效果

在这里插入图片描述

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>id选择器的使用</title>
    <style type="text/css">
        /* #luck{
          color: pink;
        } */
    </style>
</head>
<body>
      <div>
        <span>早安</span>
        <div>
            <span>各位</span>
        </div>
      </div>
      <span id="luck">祝你好运</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

4.通配符选择器

a.语法

*{
   样式名:样式值1;
   样式名:样式值2;
   ......
}
1
2
3
4
5

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">
      *{
        color: purple;
        background-color: orange;
      }
   </style>
</head>
<body>
    <div>
        <div class="one" id="content">坚持,不只是为了离梦想更近一步</div>
        <div><span>
            每天进步一点点,量变总会带来质变的
        </span></div>
        <div>
            <span>挣钱是为了保护想保护的人</span>
        </div>
    </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
26

相关阅读:
【白盒测试】单元测试的理论基础及用例设计技术（6种）详解
 如何快速开发app？小程序+插件少不了
 python中使用tflite推理网络
 [ROS系列]ubuntu 20.04 从零配置orbslam3（无坑版）
有此秘籍，TIF图片转Excel表格不再难
 界面控件DevExpress WinForms的流程图组件 - 可完美复制Visio功能（一）
Hive 删除一个字段
 使用DownThemAll批量下载网站上的文件
 李立宗《计算机视觉40例》PPT课件：第3章
 如何在Ubuntu部署Emlog，并将本地博客发布至公网可远程访问
原文地址：https://blog.csdn.net/SSS4362/article/details/125454917