1. CSS相关​

• "子绝父相"， "子绝父固"都在什么情况下使用，举一个例子
• 什么是标准流
  • position的什么属性会脱离标准流
• 居中问题
  • margin如何居中
  • text-align: center
  • 绝对定位元素如何水平，垂直居中

我们在做算法类项目的时候，通常需要在客户机器上部署，无论是windows还是centos，都需要装一些软件以及程序，下面分享我经常会装的内容，希望对你有帮助，可以提升速度。

1. windows​

• 传统行业的客户使用windows的比较多，因此这部分先说
• windows可能有登陆密码，找客户先要到，当然最好还是先暂时取消登陆密码，免得麻烦
• 先检查配置，GPU显存，内存大小，C盘容量，其他盘容量
  • GPU显存的大小以及内存大小决定了很多模型能不能用
  • C盘要预留一些空间，作为系统盘满了会导致很卡
• 防火墙关闭
  • 为了防止安装一些东西出幺蛾子，开始阶段还是关了吧
• 有些软件，还是先装了吧
  • Google Chrome浏览器（当然Edge也可以），反正IE太垃圾

1.1 远程控制软件​

需要这类软件的原因不言而喻，我们经常接的项目不像公司中正常坐班或者出差，可以接触物理机，

一般都是在远程，利用空余时间来做，通常就需要远程控制软件来远程操作。

1.1.1 向日葵​

• 官网地址
• 注意事项：
  • 第一次让客户给你设置一个永久登陆密码，否则开机重启后，密码会变
• 好处
  • 自带文件传输功能
  • 允许多端登陆
  • 不收费

1.1.2 window自带远程桌面​

• 这个我只用过一次，因为客户用的机器是windows server，只给我提供这个，我个人不太喜欢

1.1.3 TeamViewer​

• 我用的也很少，因为后来开始收费了（😂）

1.2 文件传输类​

我们经常遇到需要传文件，软件，代码去客户机器的场景，下面分享我常用的几个技巧

1.2.1 网站互传​

• 有很多网站，采用中转传输的方式，比如轻松传
• 好处
  • 非常方便，不用安装任何软件，能访问网络即可
• 坏处
  • 大文件还是有点耗时
  • 离线传送需要VIP了
  • 敏感文件最好不用通过这种方式（毕竟是先把文件传送到网站的服务器）
    • 当然也可以选择加密压缩后再传输

1.2.2 其他软件附带功能​

• 很多软件主业并不是做这个文件传输的，但是也慢慢被聪明的用户拿来做文件传输了
• 比如
  • 向日葵的文件传输
  • 百度云，夸克云等各种云盘

1.2.3 git, gitee​

• 是的，你没有看错，我说的就是你经常用的git
• 使用好git，很多时候还是很方便的
  • 你自己机器上代码修改后就直接提交，客户机器上一pull一下即可
• 坏处
  • 对大文件不太好
  • 客户机器上最好不要修改，不然容易冲突

1.3 python开发工具包​

• 既然做算法的，基本上很难饶过python了

下定决心还是再学一遍CSS等前端知识

Day08

1. border图形​

• border-right-color

• 旋转

  • transform: rotate(90deg);
  • transform-origin: center/25%; 旋转中心点

• https://css-tricks.com/the-shapes-of-css

2. Web网络字体​

• 之前通过font-family设置字体
  • 我们需要提供一个或多个字体种类名称，浏览器会在列表中搜寻，直到找到它所运行的系统上可用的字体
  • 这样的方式完全没有问题，但是对于传统的web开发人员来说，字体选择是有限的
  • 这就是所谓的web-safe字体
  • 并且这种默认可选的字体并不能进行一些定制化的需求

2.1 web fonts 的工作原理​

• 首先，需要通过一些渠道获取到希望使用的字体

  • 对于某些收费的字体，需要获取到对应的授权
  • 对于某些公司定制的字体，需要设计人员来设计
  • 对于某些免费的字体，需要获取到对应的字体文件

• 其次，在我们的CSS代码当中使用该字体（重要）

  • 具体看后面的操作流程

• 最后，在部署静态资源的时候，将HTML/CSS/JavaScript/Font一起部署在静态服务器中

• 用户的角度

  • 浏览一个网页的时候，因为代码中有引入字体文件，字体文件会被一起下载下来
  • 浏览器会根据使用的字体在下载的字体文件中查找，解析，使用对应的字体
  • 在浏览器中使用对应的字体显示内容

• 流媒体

  • 封装格式

  • 编码格式

3. Web字体图标​

4. CSS精灵图​

spritecow.com

5. cursor属性​

下定决心还是再学一遍CSS等前端知识

1. 结构伪类​

1.1 nth-child​

• 奇数
  • nth-child(2n+1)
• 偶数
  • nth-child(2n)
• 前几个
  • nth-child(-n+5)

1.2 nth-last-child​

• nth-last-child(1)
  • 倒数第一个
• nth-last-child(-n+2)
  • 最后2个

1.3 nth-of-type​

• 和nth-child类似，但是这个计数的时候只计算同种类的元素

1.4 nth-last-of-type​

1.5 其他​

• :first-child
• :last-child
• :first-of-type
• :last-of-type
• :only-child
• :only-of-type
• :root
• :empty
  • 里面完全空白的元素

1.6 否定伪类​

• :not(), 格式是:not(x)
  • x是简单选择器

下定决心还是再学一遍CSS等前端知识

1. 列表元素​

1.1 列表的实现方式​

• 方案一：使用div
• 方案二：使用列表元素，
• 事实上现在很多网站对于列表元素没有很强烈的偏好，更加不拘一格，按照自己的风格来布局
  • 原因是列表元素默认的CSS样式，让他用起来不是很方便
  • 比如列表元素往往有很多的限制，ul/ol中智能存放li，li再存放其他元素，默认样式等
  • 虽然我们可以通过重置来解决，但是我们更喜欢自由的div
• HTML提供了3组常用的展示列表的元素
  • 有序列表：ol, li
  • 无序列表：ul, li
  • 定义列表：dl, dt, dd

2. 表格元素​

• 在网页中，对于某些内容的展示使用表格元素更为合适和方便

• 常见元素

  • table
  • tr
  • td
  • 后增加的元素
    • thead
      • td->th
    • tbody
    • tfoot
    • caption

• 其他已经不推荐用了

  • table元素应该使用CSS制定样式
  • 设置margin-left, margin-right为auto，来实现类似于align属性的效果

• 案例

  • border-collapse
    • collapse折叠

• 单元格合并

  • 跨列合并：
    • colspan
    • 在最左边的单元格使用，并省略掉合并的td
  • 跨行合并
    • rowspan
    • 在最上面的单元格使用，并省略掉合并的td

• 案例：

  • 快捷写法：tr*12>td{数学}*6
  • 技巧
    • table tr:nth-child(-n + 2){} :n的取值，0和整数

3. 表单元素​

• 和用户交互的重要方式之一
• 常见的表单元素
  • form
    • 表单，一般情况下，其他表单相关的元素都是他的后代
  • input
    • 单行文本输入框，单选框，复选框，按钮
  • textarea
    • 多行文本框
  • select，option
    • 下拉选择框
  • button
    • 按钮
  • label
    • 表单元素的标题

3.1 input​

• input
  • 是一个行内替换元素
  • type
    • text
    • password
    • ratio
    • checkbox
    • button
    • reset
    • submit
    • file
    • readonly
    • disabled
    • checked
      • 默认选中，只有当type为ratio或checkbox的时候可以用
    • autofocus
    • name
    • value
    • time
    • date

3.1.1 布尔属性（boolean attributes)​

• 常见的有
  • disabled, checked, readonly, multiple, autofocus, selected
• 布尔属性可以没有属性值，写上属性名就代表使用这个属性

3.1.2 表单按钮​

• 按钮
  • button
  • reset
  • Submit

3.1.3 input和label的关系​

• label可以展示会input的标题
• label可以跟某个input绑定，点击某个label就可以激活对应的input变成选中

<label for="username">
    用户：
</label>
<input id="username" type="text"/>

<label for="username">
    用户：
    <input id="username" type="text"/>
</label>

3.1.4 ratio​

• 在类型为radio的input中，如果name一样，那么两个radio就会互斥

<label for="male">
    <input id="male" type="radio" name="sex" value="male">男
</label>

<label for="female">
    <input id="female" type="radio" name="sex" value="female">女
</label>

3.1.5 checkbox​

<label for="basketball">
    <input id="basketball" type="checkbox" name="hobby" value="basketball">篮球
</label>

<label for="football">
    <input id="football" type="checkbox" name="hobby" value="football">足球
</label>

3.2 form常见的属性​

4. Emmet语法​

4.1 认识Emmet语法​

• 前身为（Zen Coding) 是一个能大幅度提高前端开发效率的一个工具

  • vscode内置了Emmet语法，在后缀为.html/.css中输入缩写后按tab/Enter键即可自动生成相应的代码

• 举例

  • ! == html:5

• >（子代）和+兄弟

4.2 HTML Emmet​

4.3 CSS Emmet​

下定决心还是再学一遍CSS等前端知识

1. 盒子模型-margin​

1.1 margin 基本使用​

换行符会造成两个元素之间有间距

暂时可以通过去除（后面介绍通过浮动，flex布局去除）

body {
    font-size: 0; 
}

依次尝试：

• margin-top
• margin-bottom
• margin-right
• margin-left
• margin 全写，以及缩写属性

1.2. padding 和 margin对比​

• 大box包含小box，如果设置大box的padding，会让大box撑开
  • box-sizing: boder-box;
• 设置小box的margin
  • 好处：不用设置boder-box，
  • 坏处： 但是对于margin-top会让大box也往下跑
    • 因为做了一个传递，把margin传递给了父元素
    • 解决办法，在父元素设置: overflow: auto;,不是最好的方式，后面讲
• 补充
  • margin用来设置元素和元素之间的距离（一般是兄弟元素）
  • padding

1.3. margin上下传递问题​

• 左右不会传递

• margin-top传递

  • 如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素

• margin-bottom传递

  • 如果块级元素的底部线和父元素的底部线重叠，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素

• 如何防止出现传递问题？

  • 给父元素设置padding-top ，padding-bottom
  • 给父元素设置border
  • 触发BFC（Block Formatting Context）(块级格式上下文)：设置overflow为auto

• 建议：

  • margin一般用来设置兄弟元素之间的间距
  • padding一般用来设置父子元素之间的间距

1.4. 上下margin的折叠​

• 垂直方向上相邻2个margin(margin-top, margin-bottom)有可能合并为一个margin，这种现象叫做collapse（折叠）

• 水平方向上的margin(margin-left, margin-right)永远不会折叠

• 折叠后最终值的计算规则

  • 两个值比较，取较大的值

• 如何防止margin折叠

  • 只设置其中一个元素的margin

• 兄弟块级元素之间margin的折叠

• 父子块级元素之间margin的折叠

1.5. 块级元素的水平居中-margin-auto​

• 浏览器默认会给body设置margin: 8px
• 块级元素 block box
  • block box width = width + padding + border + margin
  • 但是默认margin-left是0
  • margin-right也是0
  • 但是浏览器优先展示width，然后再把剩余的空间设给right
• 如果希望居中，则把margin-left和margin-right都设置为auto
• 点评
  • 这种方式不太好，用flex布局则是更好
  • 比如float浮动也不应该用来做布局

2.盒子模型-外轮廓-outline​

• outline表示元素的外轮廓
  • 不占用空间
  • 默认显示在border的外面
• outline相关属性
  • outline-width
  • outline-style
  • outline-color
  • Outline: outline-width, outline-style, outline-color

3.盒子模型-阴影-box-shadow​

• box-shadow属性可以设置一个或者多个阴影

  • 每个阴影用shadow表示
  • 多个阴影之间用逗号隔开，从前到后叠加

• 常见格式

  • none | <shadow>#
  • <shadow> = inset? && <length>{2, 4} && <color>?
  • 第一个length: offset-x,水平方向的偏移，正数往向右
  • 第二个length: offset-y,水平方向的偏移，正数往向下
  • 第3个length：blur-radius, 模糊半径
  • 第4个length：spread-radius, 延伸半径
  • color: 阴影的颜色，如果没有设置，就跟随color属性的颜色
  • inset: 外框阴影变成内框阴影

• 坐标轴

• blur：阴影的模糊度

• 在线网站

  • https://html-css-js.com/css/generator/box-shadow/

4.盒子模型-文字阴影-text-shadow​

• 类似于box-shadow，用于给文字添加阴影
• 相当于box-shadow，但是没有spread-radius的值
• 没有向内
• https://html-css-js.com/css/generator/text-shadow/

5. 行内非替换元素的注意事项​

• span/a/strong/i
  • width,height不生效
  • padding, border, margin，上下可以撑大，但是不占空间

6. 盒子模型-盒子尺寸计算-box-sizing​

• 背景色有没有设置到border下面（有设置）
• 前景色会在border没有设置颜色的情况下，显示出来color颜色

.box {
    width: 100px;
    height: 100px;
    background-color: #f00;
    color: orange;
    padding: 30px;
    border: 10px solid;
}

• box-sizing用来设置盒子模型中宽高的行为
• content-box
  • padding, border都布置在width，height外边
• border-box
  • padding, border都布置在width，height里面

7. 案例​

• 灰色背景：#f5f5f5

• 单行显示省略号

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

下定决心还是再学一遍 CSS 等前端知识

1. background​

1.1 background-image​

• 用于设置元素的背景图片
  • 会盖在（不是覆盖）background-color 的上面
• 如果设置了多张图片
  • 设置的第一张图片将显示在最上面，其他图片按顺序层叠在下面
• 如果设置了背景图片后，元素没有具体的宽高，背景图片是不会显示出来的

1.2 background-repeat​

1.3 background-size​

• auto: 默认值，以背景图本身大小显示
• cover：缩放背景图，以完全覆盖铺满元素，可能背景图片部分看不见
• contain：
• <percentage>
• Length

1.4 background-position​

• 用于设置背景图片在水平，垂直方向上的具体位置
  • 可以设置具体的数值，比如 20px 30px
  • 水平方向还可以设值：left, center, right
  • 垂直方向还可以设值: top, center, bottom
  • 如果只设置了一个方向，另一个方向默认是 center

1.5 background- attachment​

• 决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动
• 可以设置以下三个值
  • scroll：表示背景相对于元素本身固定，而不是随着它的内容滚动
  • local：表示背景相对于元素的内容固定，如果一个元素拥有滚动机制，背景将会随着元素的内容滚动
  • fixed

1.6 缩写属性​

1.7 background-image vs. img​

本地智能知识库使用手册​

1. 启动​

​ 因为知识库背后需要一些软件，交付之前已经设置开机启动，所以无特殊情况不用进行1.1，可以直接看1.2进行登陆访问

1.1 启动Docker Desktop​

​ 在搜索栏中搜索 Docker Desktop，直接点击打开，然后就不用管了，可以把它最小化，以免干扰

1.2 注册​

找到任意的浏览器，搜索localhost，并回车即可看到登陆页面,可以先进行注册

在注册界面依次填入邮箱，用户名，密码即可

1.3 登陆访问​

在登陆页面输入你的信息

​ 初始管理员邮箱: admin@test.com , 密码: 123456

​ 后期可以自己修改

2. 简单使用​

​ 我们期望本地智能知识库可以给我们提供业务上的帮助，所以一般使用聊天对话的方式和知识库互动，获取自己想要的信息。

​ 点击页面标题中间的“聊天”，可以看到页面的变化

​ 这里左侧提供了两个聊天助手，一个是“统计分析助手”，另一个是“通用知识库助手”，可以根据需求不同，来找对应的助手进行“咨询”

​ 两个助手的区别在于，提示词不同以及所使用的知识库不同。

2.1 通用知识库助手​

**使用场景：**对业务不太熟悉，直接询问某些业务的技术术语解释，助手会给出基于已有行业知识文件的内容来进行解析。

使用方式：点击“通用知识库助手”，找你之前的某个聊天，或者点击聊天右侧的➕号，新建一个。

然后直接提问即可，比如我这里提问：“OLT是什么”，他会根据我的问题，先去本地知识库中搜索相关的文件，接着结合大模型的回答进行回答。

2.2 统计分析助手​

**使用场景：**想基于已有的某个文件或者某些文件进行数据分析。

使用方式：点击“统计分析助手”，找你之前的某个聊天，或者点击聊天右侧的➕号，新建一个，步骤和2.1类似，不再赘述。

本助手和前一个助手有所区别的是，所用知识库中有一些excel，可以用来对excel中的数据提供基本的数据分析。

3. 维护行业知识文件​

​ 作为一个本地知识库，和一般大模型不同的就是我们可以维护自己的知识库，以期望大模型可以帮我们回答一般通用大模型（Deepseek R1）无法回答的问题，而本地的知识是需要通过某种方式给到我们的软件。

3.1 知识库介绍​

这里有两个知识库：表格知识库 以及 通用知识库

• 表格知识库可以对excel，csv等表格型的文件更好的处理和管理
• 通用知识库可以对一些PPT，word，PDF等格式更好的处理和管理

3.2 上传文件到知识库​

进入某个知识库，这里以通用知识库为例，

点击新增文件，选择本地文件

勾选创建时解析，然后点击上传文件或者拖拽上传，点击确定即可

解析会占用一定的时间，等待这里的状态变为完成才可使用这个文件中的内容

• 注意，虽然可以处理比较大的文件，但是最好不要超过一定的大小，比如30M，解析会比较慢

3.3 从知识库中删除文件​

在知识库中可以对文件进行删除或者其他操作

4. 人员管理​

一般部署本地知识库是给整个团队或者公司提升效率，为了避免多人使用同一个账号带来的隐私性问题，支持多账号登陆管理。

4.1 添加人员​

先让其他团队成员按照1.2，1.3注册登陆，

然后管理员（你）按照如下操作

输入正确的团队成员邮箱之后，即可发送邀请

而被邀请同事来到相同的界面（用他自己的账号登陆），则可以看到需要他同意

被邀请人同意之后，admin这里会看到角色状态的变更：

此时其他团队成员也可以看到所有的知识库了（需要admin在知识库的设置中权限设置为“团队”）

但为了防止API key的滥用，如果其他人员需要添加文件，是不允许的，需要自己绑定自己的API key来使用

4.2 删除人员​

在团队成员列表中的末尾有个删除按钮

5. 大模型配置​

5.1 LLM大模型的配置​

LLM表示聊天对话大模型，用来在聊天助手对话那块。

目前因为机器的配置原因采用的是线上满血DeepSeek R1版，如果后期需要修改，可以通过如下步骤进行修改：

接下来的对话框会让你提供一个API-Key

不同的大模型的API-Key获取方式不太一样，但思路是一样的：

首先来到对应的官网，比如DeepSeek(https://platform.deepseek.com/api_keys)

进入后来到API-Keys，点击创建

输入名称，点击创建

然后会弹出一个对话框，显示了API Key，点击拷贝复制到我们的网站上（注意这里的API-Key只会出现一次，最好找个地方记下来，否则忘记的话只能删了重新创建了）

我们粘贴刚才的API Key，

可以看到添加成功：

那既然在系统里面添加了LLM模型，我们就可以在聊天助手中使用了

在聊天助手的右侧鼠标停留一段时间，会出现编辑按钮

在新对话框，模型设置的tab下面就可以选择新的模型了

5.2 Embedding模型的配置​

Embedding模型主要是用来解析本地文件的，把本地知识向量化，这样后期检索会更快。

可以也按照5.1的方式找添加一个带embedding标识的大模型即可

之后来到表格知识库，可以设置embedding的模型了：

海康摄像机抓图​

参考：https://www.bilibili.com/video/BV1BZcnemEEW/?spm_id_from=333.337.search-card.all.click&vd_source=ed1c88d125a8e3175a51feb4f2ff329a

SDK：

https://open.hikvision.com/download/5cda567cf47ae80dd41a54b3?type=10&id=5cda5902f47ae80dd41a54b7

阅读开发手册：brew install gcviewer

chmox: https://chmox.sourceforge.net/ 不支持M芯片

brew install chmlib

https://github.com/waimifeier/hikvision-spring-boot-starter

https://open.hikvision.com/download/5cda567cf47ae80dd41a54b3?type=10

https://www.bilibili.com/video/BV1VHRPY2Ek2/?spm_id_from=333.337.search-card.all.click&vd_source=ed1c88d125a8e3175a51feb4f2ff329a

mvn install:install-file -Dfile=./examples.jar -DgroupId=com.qy -DartifactId=examples -Dversion=1.0.0 -Dpackaging=jar

https://open.hikvision.com/hardware/definitions/NET_DVR_GetLastError.html

快捷键​

1. 插件​

• intellij-idea-keybindings

• Material Icon Theme

2. 设置技巧​

• 自动保存打开

• directory 的indent设置成大一点

3. 快捷键​

• macOS: command + shift + P打开命令窗口，搜索shell, install

雷军基本信息​

雷军演讲​

• 2022年雷军跨年演讲，分享他人生三次低谷，如何度过

下定决心还是再学一遍CSS等前端知识

CSS选择器​

• 什么是CSS选择器

  • 按照一定的规则选出符合条件的元素，为之添加CSS样式

• 选择器的种类繁多

  • 通用选择器(universal selector)
  • 元素选择器(type selectors)
  • 类选择器(class selectors)
  • id选择器(id selectors)
  • 属性选择器(attribute selectors)
  • 组合(combinators)
  • 伪类(pseudo-classes)
  • 伪元素(psedo-elements)

通用选择器(universal selector)​

• 选择所有的元素

• 一般用来给所有元素设置一些通用性的设置

  • 比如内边距，外边距
  • 比如重置一些内容

• 效率比较低，尽量不要使用

• body 默认有一个margin 8px

* {
    font-size: 20px;
}

/*尽量不用通配符*/

body, p, div, h2, span {
    margin: 0;
    padding: 0;
}

简单选择器​

• 一个HTML文档里面的id值是唯一的，不能重复

  • id值如果由多个单词组成，单词之间可以用中划线，下划线连接，也可以使用驼峰标识
  • 最好不要用标签名作为id值

• 中华线又叫连字符（hyphen）

元素选择器(type selectors)， 使用元素的名称​

类选择器(class selectors)，.类名​

id选择器(id selectors)，#id​

属性选择器​

• 拥有某一个属性 [att]

• 属性等于某个值 [att=val]

• 其他了解下

  • [att*=val]: 属性值包含某一个值val
  • [att^=val]: 属性值以val开头
  • [att$=val]: 属性值以val结尾
  • [att|=val]: 属性值等于val或者以val开头后面紧跟连接符-
  • [att~=val]: 属性值包含val，如果有其他值，比如以空格和val分割

<div title="div"></div>

<h2 title="h2"></h2>

[title] {
    color: red;
}

[title=div] {
    background-color: red;
}

后代选择器(descendant combinator)​

• 后代选择器一：所有后代（直接和间接的后代）

  • 选择器之间以空格分割
    • .box span {xxx}

• 后代选择器二：直接子代选择器（必须是直接自带）

  • 选择器之间以 >分割

兄弟选择器(sibling combinator)​

• 相邻兄弟选择器
  • .box + .content {}
• 普遍兄弟选择器 ~
  • .box ~ div {}

选择器组​

交集选择器​

• 同时符合两个选择器条件，为了精准选择某一个元素

<div class="box"></div>
<p class="box"></p>

div.box {
    xxx
}

并集选择器​

• 符合一个选择器条件即可，两个选择器以,分割

body, h2, p, div {
    xxx
}

伪类​

认识伪类​

• Pseudo-classes，伪类

• 伪类是选择器的一种，用于选择处于特定状态的元素

• 常见的伪装

  • 动态伪类(dynamic pseudo-classes)
    • :link
    • :visited
    • :hover
    • :active
    • :focus
  • 目标伪类(target pseudo-classes)
    • :target
  • 语言伪类(language pseudo-classes)
    • :lang(en)
  • 元素状态伪类(UI element states pseudo-classes)
    • :enabled
    • :disabled
    • :checked
  • 结构伪类（structural pseudo-classes）
    • :nth
      • :nth-child()
      • :nth-last-child()
      • :nth-of-type()
      • :nth-last-of-type()
    • :first
      • :first-child()
      • :last-last-child()
      • :first-of-type()
      • :last-of-type()
    • 第三类
      • :root
      • :only-child
      • :only-of-type
      • :empty
  • 否定伪类(negation pseudo-classes) :not()

div:hover{

}

动态伪类(dynamic pseudo-classes)​

• :link

  • a:link 未访问的连接

• :visited

  • a:visited 已访问的连接

• :hover

  • a:hover 鼠标挪动到链接上

• :active

  • a:active 激活的连接(鼠标在链接上长按住未松开)

• :focus

  • 指当前拥有输入焦点的元素（能接收键盘输入）
  • 文本输入框一聚焦后，背景就会变成红色
  • 因为链接a元素可以被键盘的tab键选中聚焦，所以:focus也适用于a元素

• 使用注意

  • :hover必须放在:link和:visited后面才能完全生效
  • :active必须放在:hover后面才能完全生效
  • 所以建议的编写顺序是:link、:visited、:hover、:active

• 除了a元素，:hover、:active也可以用在其他元素上

• 动态伪类的编写顺序建议为：

  • :link、:visited、:focus、:hover、:active

• 直接给a元素设置样式，相当于给a元素的所有动态伪类都设置了

伪元素(pseudo-elements)​

• 常见的伪元素有

  • :first-line, ::first-line
  • :first-letter, ::first-letter
  • :before, ::before
  • :after, ::after

• 为了区分伪类和伪元素，建议用两个冒号

• :first-line, ::first-line

  • 可以针对首行文本设置属性