本课程需要具备的知识：

1 CSS简介

在 HTML5 教程中，已经介绍了前端页面的构成，主要包括：

  • HTML：用于描述页面的结构
  • CSS：用于控制页面中元素的样式
  • JavaScript：用于响应用户操作

通过 CSS，我们可以让页面上的内容和样式分离，使得网页的内容可以被不同的样式装饰，最终以不同的方式显示，而无需改变HTML的结构，从而提高网页的可维护性和可读性。就像王者荣耀中，一个英雄可以有很多的皮肤，使用不同的皮肤可以显式不同的效果，CSS就像网页的皮肤，相同的 HTML 使用不同的CSS样式，可以让网页显示不同的效果。

1.1 CSS3的新特性

简单了解一下，可以跳过…

  • 强大的选择器：CSS3 新增了许多实用的选择器，如属性选择器、伪类选择器和伪元素选择器等。例如input[type="text"]可以直接选择所有类型为文本的输入框；:hover伪类可以在鼠标悬停时改变元素的样式；::before和::after伪元素可以在元素内容之前或之后插入生成的内容。
  • 丰富的文本效果：提供了更多的文本样式和排版功能，如text-shadow属性可以为文本添加阴影效果，word-wrap和word-break属性可以更好地控制文本的换行和断字，@font-face规则允许使用自定义字体，极大地丰富了网页的字体选择。
  • 灵活的盒模型：引入了弹性盒模型（Flexbox）和网格布局（Grid Layout）。Flexbox 可以轻松实现元素的水平和垂直居中、自适应布局等，使页面布局更加灵活和高效；Grid Layout 则提供了一种基于网格的二维布局系统，能够方便地创建复杂的页面布局，如多栏布局、响应式布局等。
  • 过渡与动画：通过transition属性可以实现元素在不同状态之间的平滑过渡效果，如颜色变化、大小变化、位置移动等，无需使用 JavaScript。@keyframes规则和animation属性则可以创建复杂的动画效果，如动画的循环播放、延迟执行、速度曲线等，为网页添加动态交互效果。
  • 背景与边框：背景方面新增了background-size属性可以控制背景图像的大小，background-origin和background-clip属性可以更精确地控制背景图像的显示区域；边框方面可以使用border-radius属性创建圆角边框，还可以使用box-shadow属性为元素添加阴影效果，使元素的外观更加丰富和立体。
  • 响应式设计：媒体查询（Media Queries）是 CSS3 中用于响应式设计的重要特性，通过@media规则可以根据不同的设备特性，如屏幕宽度、高度、分辨率等，应用不同的样式规则，从而实现网页在不同设备上的自适应显示，提高用户体验。

其他的介绍就不多逼逼了，赶紧学习！

2 开发环境

开始之前，先准备一下开发环境。

2.1 编辑器的选择

开发工具现在最常用的就是 Visual Studio Code（简称VS Code）、WebStorm。

这里推荐免费的用VS Code，如果用收费的就用WebStorm（可以说是最牛逼的开发工具）。

下面我们在学习的过程中也是选择使用的VS Code，VS Code强大的地方就是它可以安装很多插件。

官方地址：https://code.visualstudio.com，下载安装即可。

VS Code 有明亮和黑暗两种主题，按自己喜好选择。

2.2 安装VS Code插件

为 VSCode 安装插件，便于我们进行更好的开发工作。

点击左侧的 插件 菜单，输入要搜索的插件，点击安装就可以，非常的easy。

下面我们安装如下插件：

  • Chinese (Simplified) Language Pack for Visual Studio Code：中文（简体）语言包，安装完成，VS Code会显示为中文，如果习惯使用英文，可以不安装；
  • Ayu：简单的主题与明亮的颜色，可以不安装，VS Code 本身也有明亮的主题。
  • vscode-icons：好看的图标，可以不安装，只是让各个文件有对应好看的图标
  • Live Server：A Quick Development Live Server with live browser reload，即提供一个 live 服务器，并且支持代码与浏览器之间的实时同步刷新，当我们编写完代码后保存，浏览器会自动刷新，可以实时看到效果，安装。

2.3 新建工作区

首先在指定的目录下（自己想放的路径下）新建一个文件夹作为工作区，例如我这里新建了一个 hello-css3 的文件夹，然后打开VS Code，用 VS Code 打开新建的文件夹。

打开的时候可能会提示是否信任， 点击信任即可。

然后新建 HTML 页面，点击右上角的 新建文件，输入文件名即可。

新建页面完成，在页面中编写 HTML 源码，在输入 ! 后，会有提示，选择一个 ! 的提示，回车，就会自动生成 HTML5 的基本结构，太方便了。

生成的 HTML5 基本结构

2.4 使用插件Live-Server

上面已经安装了Live-Server，现在说明一下如何使用。

1 使用 Live-Server 运行页面

按照之前编写 HTML5 基本结构中的代码，编辑到上面新建的 index.html 中。

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>网页的标题</title>
  </head>
  
  <body>
    <!-- h1网页的一级标题 -->
    <h1>网页的大标题</h1>
  </body>
</html>

然后在 HTML 文件上右键单击，选择 Open With Live Server， 即可在浏览器中打开当前页面。

浏览器会自动打开

会看到地址栏的地址和之前我们直接在本地打开文件有所区别，这是因为 Live-Server 是以服务器的方式运行编写的页面，我们在浏览器实际是请求服务器获取到页面的内容。

2 设置VS Code 自动保存

在对文件进行修改后，需要手动保存，网页才会刷新，我们也可以设置VS Code自动保存，这样网页就会自动刷新。

点击 设置 的齿轮按钮，打开设置，在设置项中搜索 auto save， 将自动保存的选项选择 afterDelay，然后将 Auto Save Delay 的值填写1000，表示修改后，1秒就执行自动保存。这样VS Code就会在修改后1秒进行自动保存。

2.5 开发文档

我们在学习 CSS 的时候，会用到很多的样式属性，我们没办法全记住，需要的时候可以查询文档。

当然你可以直接百度，或者问大预言模型，我是觉得问大语言模型反而更方便。

大语言模型：文心一言、豆包、ChatGPT、Gemini等等，根据需要选择。

在这里介绍两个查询 HTML 使用文档的网站，有需要可以查询：

W3school

CSS参考手册地址： 点击前往

在其中可以找到CSS属性的介绍和属性说明，如果某个属性忘记了，可以查询一下。

MDN

官网地址：点击前往

打开网站，找到 CSS：

可以查看到 CSS 的各种功能和介绍：

3 CSS语法

下面开始正式学习 CSS。

首先要知道 CSS 样式书写在什么地方，语法是什么样子。

3.1 CSS样式分类

根据CSS代码书写的位置， CSS 大致可以分为 3 种：

  • 内联样式
  • 内部样式表
  • 外部样式表

1 内联样式

内联样式也叫行内样式，在 HTML 标签内部通过 style 属性来设置元素的样式。

举个栗子：

1
2
3
<body>
    <p style="color:red; font-size:30px;">CSS样式</p>
</body>
  • 上面 style 属性指定的就是CSS样式，这里我们暂时不纠结它的含义，待会我们再细说。

缺点：使用内联样式，样式只能对当前这一个标签生效。如果希望影响到多个元素，必须在每一个元素中都复制一遍；并且当样式发生变化时，我们必须要一个一个的修改，非常的不方便。

所以注意：开发时尽量不要使用内联样式。

2 内部样式表

将样式编写到 head 标签中的 style 标签里，然后通过 CSS 的选择器来选中元素，并为其设置各种样式。

举个栗子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS简介</title>

    <style>
        p {
            color:red;
            font-size:30px;
        }
    </style>
</head>

<body>
    <p>CSS样式1</p>
</body>

</html>

  • 首先在HTML页面的 head 标签中的 style 标签中书写了一段CSS代码；

  • 代码的含义我们暂时不解释，待会我们细说，这里只知道它设置了标签的颜色和字体大小。

最终显示效果如下：

内部样式表有哪些优缺点呢？

优点：可以同时为多个标签设置样式，并且修改时只需要修改一处即可。内部样式表更加方便对样式进行复用。

缺点：我们的内部样式表只能对一个网页起作用，它里边的样式不能跨页面进行复用。

但是，后面我们为了学习方便，还是以内部样式的形式来演示。

3 外部样式表

我们可以将 CSS 样式单独编写到一个外部的 CSS 文件中，然后通过在页面中通过 link 标签来引入外部的 CSS 文件。

举个栗子：

我们新建了一个 styles 文件夹，在 styles 文件夹中新建了一个 index.css 文件，并在其中编写将刚才的CSS代码。

然后在 index.html 页面中使用 link 标签引入CSS文件，

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS简介</title>
    <link rel="stylesheet" href="./styles/index.css" />
</head>

<body>
    <p>CSS样式1</p>
</body>
</html>

显示的效果和刚才是一样的。

那么使用外部样式表有哪些好处呢？

外部样式表需要通过 link 标签进行引入，意味着只要想使用这些样式的网页都可以对其进行引用使样式，可以在不同页面之间进行复用。

外部样式表示一个单独的文件，浏览器在加载的时候，会将CSS文件进行缓存，如果其他页面也使用了这个CSS文件或后面再次访问这个页面，将会使用缓存文件，从而加快网页的加载速度，提高用户的体验。

3.2 CSS基本语法

1 注释

我们几乎在学习任何语言的时候，都会有注释，包括 HTML 语言，那么 CSS 中的注释格式是什么样的呢？

在CSS中的注释只能使用 /* 和 */ 包裹。即不管是单行注释，还是多行注释，都是以 /* 开头，以 */ 结尾。

例如：

1
2
3
4
5
6
7
/* css中的单行注释 */

/* 
css中的多行注释
css中的多行注释
css中的多行注释
*/

2 基本语法

下面我们就来介绍一下上面编写的CSS样式的含义。

1
2
3
4
p {
  color:red;
  font-size:30px;
}

CSS基本语法主要包括 选择器 和 声明块 。

选择器 用来选中页面中指定的元素，声明块 用来对选择的元素设置样式。

所以解释一下上面的代码：

  1. 前面的 p 表示选择器，p 后面 {} 部分是声明块 ，后面 {} 中这些样式就是对前面的选择器选中的元素生效； 这里的 p 选择器的含义是对选择页面中所有的 p 元素生效，后面我们再对各种选择器进行学习；
  2. 声明块中的样式是 键值对 的形式，也就前面是属性名，后面是属性值，键和值之间以 : 连接，以 ; 结尾。我们后面学习CSS样式就是学习各种属性和值的设置；
  3. color:red; 表示 颜色:红色，设置标签中字体的颜色，font-size:30px; 表示 字体大小:30像素；每个设置项后面用 ; 分隔；

4 CSS选择器

下面来讲解选择器，选择器的作用是用来选中页面中的元素，然后才可以给选中的元素添加样式。

这个章节是非常非常重要的！！！

4.1 常用选择器

1 元素选择器

也叫类型选择器、标签选择器

  • 作用：根据标签名来选中指定的元素
  • 语法：元素名称 {}，

举个栗子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
    <style>
        h1 {
            color: green;
        }
        p {
            color: red;
        }
    </style>
</head>
<body>
    <h1>登鹳雀楼</h1>
    <p>白日依山尽，</p>
    <p>黄河入海流。</p>
    <p>欲穷千里目，</p>
    <p>更上一层楼。</p>
</body>

使用了标签选择器选择了h1元素和 p 元素，并分别设置了颜色。那么样式会对页面中所有的 h1元素和 p 元素生效。

效果如下：

元素选择器是对所有元素生效的，如果只想对其中一个元素生效，该怎么做呢？下面来说ID选择器。

2 ID选择器

  • 作用：根据元素的id属性值选中一个元素
  • 语法：#id {}

举个栗子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<head>
    <style>
        #last {
            color: pink;
        }
    </style>
</head>

<body>
    <h1>登鹳雀楼</h1>
    <p>白日依山尽，</p>
    <p>黄河入海流。</p>
    <p>欲穷千里目，</p>
    <p id="last">更上一层楼。</p>
</body>

首先需要给元素加上一个id属性，值是自定义的，但需要注意 id 需要全局唯一，不能重复。 然后在样式表中通过 #id 来选中元素，添加样式。

id选择器只能对一个元素生效，如果要对两个元素生效，定义两个 id 然后定义两个样式，有点麻烦，那么怎么办呢？下面来说类选择器。

3 类选择器

  • 作用：根据元素的 class 属性值选中一组元素
  • 语法：.classname {}

举个栗子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<head>
    <style>
        .test {
            color: blue;
        }
    </style>
</head>

<body>
    <h1>登鹳雀楼</h1>
    <p>白日依山尽，</p>
    <p>黄河入海流。</p>
    <p class="test">欲穷千里目，</p>
    <p class="test">更上一层楼。</p>
</body>

首先需要给要选定的标签添加 class 属性，值是自定义的。然后在样式表中通过 .classname {} 来选定元素，并添加样式。

和 id 不同的是：

  • class 可以重复使用，给多个元素添加，相当于给元素进行分类；
  • 可以同时为一个元素指定多个 class 值；
1
<p class="title big-size">类选择器</p>

上面为 p 元素指定了两个 class：title 和 big-size。一个元素可以有多个 class，多个元素可以共享相同的 class 。

如果要选中页面中所有的元素，改怎么办呢？那么可以使用通配符选择器。

4 通配选择器

  • 作用：选中页面中的所有元素
  • 语法：* {}
1
2
3
4
5
<style>
  * {
    color: blue;
  }
</style>

上面的代码选中了页面中所有的元素，并添加了样式，设置颜色为蓝色。

显示效果：

通配选择器一般会在给页面的所有元素清除默认的样式的时候使用，元素都有默认的样式，例如间距，一般会先将默认的样式去掉，然后进行重新设置。

5 属性选择器

  • 作用：根据元素的属性值选中一组元素。
  • 语法 1：[属性名] 选择含有指定属性的元素
  • 语法 2：[属性名=属性值] 选择含有指定属性和属性值的元素
  • 语法 3：[属性名^=属性值] 选择属性值以指定值开头的元素
  • 语法 4：[属性名$=属性值] 选择属性值以指定值结尾的元素
  • 语法 5：[属性名*=属性值] 选择属性值中含有某值的元素

举个栗子：

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
<style>
  /* 选择包含title属性的p元素 */
  p[title] {
    color: blue;
  }

  /* 选择title属性是hello的p元素 */
  p[title="hello"] {
    color: blue;
  }

  /* 选择title以hello开头的p元素 */
  p[title^="hello"] {
    color: blue;
  }

  /* 选择title以hello结尾的p元素 */
  p[title$="hello"] {
    color: blue;
  }

  /* 选择title值包含hello的p元素 */
  p[title*="hello"] {
    color: blue;
  }
</style>

需要注意：

1
2
3
4
5
<!-- title="hello"满足包含title属性、 title属性是hello、以hello开头、以hello结尾、包含hello多种情况，在编写样式的时候，如果匹配到后面的规则，则会覆盖前面的规则 -->
<p title="hello">白日依山尽，</p>

<!-- 满足title以hello开头、包含hello -->
<p title="hello-foooor">黄河入海流。</p>

4.2 复合选择器

复合选择器是将多个选择器搭配使用。主要有交集选择器和并集选择器。

1 交集选择器

  • 作用：选中同时符合多个条件的元素
  • 语法：选择器1选择器2选择器3选择器n {}，选中的元素需要同时满足所有的选择器的条件。

举个栗子：

1
2
3
4
5
6
7
<body>
  <h1>登鹳雀楼</h1>
  <p class="test">白日依山尽，</p>
  <div>黄河入海流。</div>
  <p class="test1 test2 test3">欲穷千里目，</p>
  <div class="test">更上一层楼。</div>
</body>

上面的元素，我们想选择最后一句更上一层楼，改如何选中呢？

1
2
3
div.test {
  color: blue;
}

上面表示选中 div，且这个 div 的 class 是 test，是并且的关系。

当然各个类也可以同时使用：

1
2
3
.test1.test2.test3 {
  color: red;
}

上面表示选中同时有 test,test1,test2 三个类的元素，也就是 欲穷千里目 这一句的元素。

注意：交集选择器中如果有元素选择器，必须使用元素选择器开头，另外各个选择器之间不能有空格。

2 并集选择器

并集选择器也叫分组选择器。

  • 作用：同时选择多个选择器对应的元素
  • 语法：选择器1,选择器2,选择器3,选择器n {}，选中的元素只要满足一个选择器的条件。

举个栗子：

1
2
3
#last, .test1, h1, span, div.test2 {} {
  color: green;
}

上面同时选择了 id 为 last 的元素，类为 test1 的元素，所有的 h1 元素、所有的 span 元素、以及类为 test2 的所有 div 元素。可以看到并集选择器中可以包含交集选择器。

4.3 关系选择器

先说明一下元素之间可能存在的关系，有以下几种：

  • 父元素：直接包含子元素的元素叫做父元素；
  • 子元素：直接被父元素包含的元素是子元素；
  • 祖先元素：直接或间接包含后代元素的元素叫做祖先元素，一个元素的父元素也是它的祖先元素；
  • 后代元素：直接或间接被祖先元素包含的元素叫做后代元素，子元素也是后代元素；
  • 兄弟元素：拥有相同父元素的元素是兄弟元素；

1 子元素选择器

  • 作用：选中指定父元素的指定子元素
  • 语法：父元素 > 子元素

举例1：选中所有 div 下的所有子 p 元素

1
2
3
div > p {
  color: orange;
}

举例2：选中 class 为 box 的 div 下的 p 元素

1
2
3
div.box > p {
  color: orange;
}

举例3：选中 class 为 box 的 div 下的 p 元素中的 span 元素。

1
2
3
div.box > p > span {
  color: orange;
}

可以一级一级的往下选择。

2 后代元素选择器

  • 作用：选中指定元素内的指定后代元素
  • 语法：祖先 后代

举例1：选中所有 div 下的所有级别的 span 元素

1
2
3
div span {
  color: blue;
}

举例2：选中所有 div 元素中的 p 元素中的 span 元素，是一级一级的包含关系。

1
2
3
div p span {
  color: blue;
}

3 兄弟元素选择器

  • 作用：选择兄弟元素

  • 语法：

    前一个 + 下一个 ：用于选择下一个兄弟元素

    前一个 ~ 下一组 ：用于选择后面所有的兄弟元素

举例1：选中所有p元素后面的第一个span兄弟元素，如果一个p元素后面不是span元素，则不会选中后面的元素。

1
2
3
p + span {
  color: red;
}

举例2：选中p元素后面所有的span兄弟元素，注意只会选中所有的span元素。

1
2
3
p ~ span {
  color: red;
}

4.4 伪类选择器

1 常用伪类选择器

伪类（不存在的类，特殊的类），不像我们之前定义的 class。伪类用来描述一个元素的特殊状态，比如：第一个子元素、被点击的元素、被鼠标移入的元素.…

伪类一般情况下都是使用 : 开头

  • :first-child ：选中第一个子元素
  • :last-child：选中最后一个子元素
  • :nth-child() ：选中第 n 个子元素
    • n：第 n 个，n 的值从 1 开始
    • 2n 或 even：选中偶数位的元素
    • 2n+1 或 odd：选中奇数位的元素

举个栗子：

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
<head>
    <style>
        /**选中第一个li*/
        ul > li:first-child {
            color: red;
        }

        /**选中最后一个li*/
        ul > li:last-child {
            color: blue;
        }

        /**选中第三个li*/
        ul > li:nth-child(3) {
            color: green;
        }
    </style>
</head>

<body>
    <ul>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
        <li>第五个</li>
    </ul>
</body>

效果如下：

当我们在第一个 li 元素前面和最后一个 li 元素后面添加一个span的时候

1
2
3
4
5
6
7
8
9
<ul>
    <span>一个牛A的span</span>
    <li>第一个</li>
    <li>第二个</li>
    <li>第三个</li>
    <li>第四个</li>
    <li>第五个</li>
    <span>一个牛B的span</span>
</ul>

最终的效果如下：

发现第一个 li 和最后一个 li 都没有被选中了，这里因为以上这些伪类都是根据所有的子元素进行排序的。

如果要根据同类型的标签进行选择，可以使用如下标签

  • :first-of-type ：同类型中的第一个子元素
  • :last-of-type ：同类型中的最后一个子元素
  • :nth-of-type() ：选中同类型中的第 n 个子元素

这几个伪类的功能和前面的类似，不同点是他们是在同类型元素中进行排序的。

演示一下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
    /**选中第一个li*/
    ul > li:first-of-type {
      color: red;
    }

    /**选中最后一个li*/
    ul > li:last-of-type {
      color: blue;
    }

    /**选中第3个li*/
    ul > li:nth-of-type(3) {
      color: green;
    }
</style>

显示效果：

还有一个常用的伪类：

  • :not()：否定伪类，将符合条件的元素从选择器中去除
1
2
3
4
5
6
7
8
9
/*除了第一个都选中*/
ul > li:not(:first-child) {
  color: red;
}

/*除了第三个都选中*/
ul > li:not(:nth-child(3)) {
  color: red;
}

2 动态伪类

  • :link ：未访问的链接状态，超链接特有伪类；
  • :visited ：已访问的链接状态，由于隐私的原因，所以 visited 这个伪类只能修改链接的颜色，这个也是超链接特有伪类；
  • :hover ：鼠标移入到元素时的状态，所有的元素都有这个伪类；
  • :active ：鼠标点击元素时候的状态，所有元素都有这个伪类；

举个栗子：

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
<style>
    /* 未访问的链接是红色 */
    a:link {
      color: red;
    }

    /* 已被访问的链接会变成绿色 */
    a:visited {
      color: green;
    }

    /* 鼠标移入时，会变成黄色 */
    a:hover {
      color: yellow;
    }

    /* 元素被点击时，会变成蓝色 */
    a:active {
      color: blue;
    }
</style>

<body>
    <a href="http://www.baidu.com">百度</a>

    <a href="http://www.163.com">网易</a>
</body>
  • 上面的伪类书写的顺序是有要求的，如果要同时使用上面的多个伪类，需要按照 link、visited、hover、active 的顺序来写，否则会导致有些伪类不生效。

效果如下：

还有一个伪类 :focus ，表示获取焦点时候的伪类，只有表单类元素才会有，例如文本框、下拉列表等。

再看一个例子，如果想在鼠标悬浮 box1 的时候，才设置 box1 中的 box2 的背景，该如何设置呢？

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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .box1 {
        width: 200px;
        height: 200px;
        background-color: blue;
      }

      .box2 {
        width: 100px;
        height: 100px;
      }

      .box1:hover .box2 {
        background-color: red;
      }
    </style>
  </head>

  <body>
    <div class="box1">
      <div class="box2"></div>
    </div>
  </body>
</html>
  • .box1:hover .box2 表示只有在 box1 元素被鼠标悬浮的时候，才会选择 box2。所以上面代码只有在 box1 被鼠标悬浮的时候，才会设置 box2 的背景。
  • 上面 width 和 height 是设置元素的宽度和高度， background-color 是设置元素的背景颜色，后面再讲。这里主要关注选择器的使用。

显示如下：

4.5 伪元素选择器

伪元素，表示页面中一些特殊的并不真实的存在的元素，表示的是一个特殊的位置，例如元素的开始和结束的位置，内容的第一个字母等。

伪元素使用 :: 开头，常用的伪元素选择器如下：

  • ::first-letter ：表示第一个字母；
  • ::first-line ：表示第一行；
  • ::selection ：表示内容被选中时候的状态；
  • ::before ：元素的开始位置；
  • ::after ：元素的最后位置；
  • ::before 和 ::after 必须结合 content 属性来使用。

举个栗子：

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
39
40
41
42
43
44
<!DOCTYPE html>
<html>
  <head>
    <style>
      /* 段落首字母设置大小为30px */
      p::first-letter {
        font-size: 30px;
      }

      /* 段落第一行设置为黄色背景 */
      p::first-line {
        background-color: yellow;
      }

      /* 段落选中的内容变绿色 */
      p::selection {
        background-color: green;
      }

      /* div前加上内容 */
      div::before {
        content: "<";
        color: blue;
      }

      /* div后加上内容 */
      div::after {
        content: ">";
        color: blue;
      }
    </style>
  </head>

  <body>
    <p>
      A lawyer dies and goes to Heaven. "There must be somemistake," the lawyer
      argues. "I'm too young to die. I'm only55." "Fifty-five?" says Saint
      Peter. "No, according to outcalculations, you're 82." "How'd you get
      that?" the lawyer asks.Answers St. Peter, "We added up your time sheets."
    </p>

    <div>Love never ends.</div>
  </body>
</html>

显示如下：

可以看到 p 元素的首字母变大了，div 标签的前后位置添加了一对尖括号 <>，但是 div 的文本中并没有尖括号。

通过开发者工具可以查看到伪元素，可以看到 ::before 和 ::after 的位置，是在元素最前端和最后端的位置：

注： 其他的伪元素用的不多，但是 ::before 和 ::after 两个伪元素在开发中用的是很频繁的。

4.6 CSS Dinner 游戏

目前我们暂时还无法编写页面，只是学习了理论的知识，请还不要着急，慢慢来。

我们通过下面的一个页面游戏来练习 CSS 选择器的使用。

官方地址：CSS Diner - Where we feast on CSS Selectors!

CSS Dinner 是一个帮助初学者快速熟悉 CSS 各种选择器的网页游戏，在网页上面的桌子上会有元素晃动，然后需要在下面的 CSS Editor 中编写选择器，选中晃动的元素。

注：例如选中上面的两个盘子，直接用元素选择器，在 CSS Editor 中编写 plate，然后回车即可。

4.7 命名规则

在 HTML 和 CSS 中，为元素定义ID，或者创建样式类的类名，一般遵循一些规则，有助于提高代码的一致性和可读性。

1 ID命名规则

  • 每个 id 在文档中必须是唯一的。一个 id 只能在整个页面中出现一次；

  • id 值应该由字母、数字、下划线（_）和连字符（-）组成，不能包含空格或其他特殊字符。当使用多个单词时，推荐使用小写字母加连字符（-）分隔多个单词，如：main-left-box 、nav-wrap 。我看到有不同的规则，例如使用下划线分隔或使用首字母小写的驼峰规则，具体看你公司要求吧；

  • id 不能以数字开头，但可以包含数字；

  • id 应该具有描述性，能够清楚地表达元素的作用或内容。

2 class命名规则

  • 一个元素可以有多个 class，多个元素可以共享相同的 class；

  • class 名称只能包含字母、数字、下划线（_）和连字符（-），不能包含空格、点（.）或其他特殊字符。当使用多个单词时，通常使用小写字母和连字符（-）来分隔多个单词，如：primary-button, search-result；

  • 尽量避免将 class 名称与 CSS 样式规则的关键字或伪类（如 hover、active）冲突；

  • class 名称应简洁且具有描述性，反映元素的作用或用途。