基本选择器

通用选择器

选择所有元素。（可选）可以将其限制为特定的名称空间或所有名称空间。

语法：* ns|* *|*

例子：* 将匹配文档的所有元素。

（性能一般，不建议太多使用）

元素选择器

类选择器

ID选择器

属性选择器

语法

/* 存在 title 属性的 <a> 元素 */
a[title] {
  color: purple;
}

/* 存在 href 属性并且属性值匹配"https://example.org"的 <a> 元素 */
a[href="https://example.org"]
{
  color: green;
}

/* 存在 href 属性并且属性值包含"example"的 <a> 元素 */
a[href*="example"] {
  font-size: 2em;
}

/* 存在 href 属性并且属性值结尾是".org"的 <a> 元素 */
a[href$=".org"] {
  font-style: italic;
}

/* 存在 class 属性并且属性值包含单词"logo"作为一个独立的单词的<a>元素 */
a[class~="logo"] {
  padding: 2px;
}

准备工作

1. 云服务器+linux（我用的ubuntu20.04）
2. docker
3. vscode + 远程资源管理器 + 插件（docker ）
4. 运气

买一个云服务器

买便宜的！！！淘宝随便找，最好找个最低cpu 2核的，用一个你熟悉的linux发行版，最好是稳定版，不折腾。

安装docker启动

1. 安装相关软件包

​ 在终端中使用 apt（Ubuntu、Debian）或 yum（CentOS）安装相关的软件包以允许使用仓库通过 HTTPS 安装软件包：

dom渲染优化

1. 减少dom节点

   dom cssom

   什么是 DOM？可能很多人第一反应就是 div、p、span 等 html 标签（至少我是），但要知道，DOM 是 Model，是 Object Model，对象模型，是为 HTML（and XML）提供的 API。HTML(Hyper Text Markup Language)是一种标记语言，HTML 在 DOM 的模型标准中被视为对象，DOM 只提供编程接口，却无法实际操作 HTML 里面的内容。但在浏览器端，前端们可以用脚本语言（JavaScript）通过 DOM 去操作 HTML 内容。

   实质上还存在 CSSOM：CSS Object Model，浏览器将 CSS 代码解析成树形的数据结构，与DOM 是两个独立的数据结构。

   接下来说一说浏览器渲染。过程。

   https://blog.csdn.net/CSDNWuZhiChun/article/details/119786163

   DOM 操作成本

   讨论 DOM 操作成本，肯定要先了解该成本的来源，那么就离不开浏览器渲染。

   1. 解析 HTML，构建 DOM 树（这里遇到外链，此时会发起请求）
   2. 解析 CSS，生成 CSS 规则树
   3. 合并 DOM 树和 CSS 规则，生成 render 树
   4. 布局 render 树（Layout/reflow），负责各元素尺寸、位置的计算
   5. 绘制 render 树（paint），绘制页面像素信息
   6. 浏览器会将各层的信息发送给 GPU，GPU 将各层合成（composite），显示在屏幕上

   ---

2. 构建dom树

3. 构建CSSOM 树

4. 生成render 树

5. Layout 布局

6. Paint 绘制