1. CSS

语法

selector

简单选择器（根据名称、id、类来选取元素）

元素选择器：元素名称
id选择器：#id
类选择器：.类名
通用选择器：*
分组选择器：以","隔开各元素

组合器选择器（根据它们之间的特定关系来选取元素）

后代选择器：空格（选择指定元素中的所有此种元素）
子选择器：>（选择指定元素中的所有此种子元素）
相邻兄弟选择器：+（选择所有在指定元素之后同级的元素）
通用兄弟选择器：~（选择所有与指定元素同级的元素）

常用伪类选择器（根据特定状态选取元素）

鼠标悬停：:hover
匹配首个子元素：:first-child
匹配第n个子元素：:nth-child(n)
选择获得焦点的元素：:focus

常用伪元素选择器（选取元素的一部分并设置其样式）

向文本首行添加特殊样式：::first-line
在元素内容之前插入一些内容：::before
在元素内容之后插入一些内容：::after

常用属性选择器（根据属性或属性值来选取元素）

[attribute]：选择带有指定属性的元素
[attribute="value"]：选择带有指定属性和值的元素
[attribute*="value"]：选择带有指定属性且其值含有指定值的元素
[attribute^="value"]：选择带有指定属性且其值以指定值开头的元素
[attribute$="value"]：选择带有指定属性且其值以指定值结尾的元素

使用

外部CSS（External CSS）

在head部分<link>中包含对外部样式表的引用。

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

内部CSS（Internal CSS）

在head中的<style>元素中定义。

行内CSS（Inline CSS）

为相关元素添加style属性，可包含任何CSS属性。

层叠顺序

行内CSS
外部CSS和内部CSS
浏览器默认样式

CSS妙用——初级

clamp(MIN, VAL, MAX)
参数：MIN最小值，VAL首选值，MAX最大值。
作用：把一个值限定在上下限之间，当值>最大值时为最大值，当值<最小值时为最小值。
position: sticky;
功能：吸顶，标题在滚动的时候会一直贴着最顶上。
应用：表格的标题栏、网站的导航栏、手机通讯录的人名首字母标题等。
:empty 选择器
功能：提示用户知道当前接口无数据。
应用：一般人为判断当前数据返回列表的长度是否为 0，如果为 0 则显示一个 “暂无数据” 给用户，反之则隐藏该提示。通过 :empty 选中内容为空的容器，然后通过伪元素为空容器添加提示。
gap
功能：让元素间隔开一定距离。
应用：gap 属性它适用于 Grid 布局、Flex 布局以及多列布局。在一些不易计算出准确边距值的情况下使用。
background-clip: text;
功能：做带背景的文字效果。
user-select
功能：禁用光标选中，让网页和移动端一样不能选中字。
应用：在 APP 上嵌套 webview 或者是网页，比如 Electron 做的桌面端应用。
:invalid 伪类
功能：:invalid 表示任意内容未通过验证的 input 或其他 form 元素。CSS实现校验提示。
应用：比如让 input 当值有效时，元素颜色为绿色，无效时为红色。
:focus-within 伪类
功能：一个元素或该元素的后代元素获得焦点，就会匹配上。
应用：可以根据子元素的状态来改变父元素的样式。
mix-blend-mode:difference;
功能：描述元素的内容应与元素的直系父元素的内容和元素的背景如何混合。
应用：做图标。

CSS妙用——进阶

CSS运行过程

浏览器载入 HTML 文件，将 HTML 文件转化成一个 DOM。
接下来，浏览器会拉取该 HTML 相关的大部分资源，比如嵌入到页面的图片、视频和 CSS 样式。JavaScript 会在之后处理。
浏览器拉取到 CSS 后进行解析，根据选择器的不同类型分类。浏览器基于它找到的不同的选择器，将不同的规则应用在对应的 DOM 的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）。
上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局。
网页展示在屏幕上（着色）。

注：当浏览器遇到无法解析的 CSS 选择器、声明、无法理解的属性和值、还没有支持的CSS代码时，浏览器会忽略，并继续解析下面的 CSS 样式。基于该特性，我们可以为同一个元素指定多个 CSS 样式来解决有些浏览器不兼容新特性的问题。

小思考

CSS最直接的作用自然是给指定的文档设置样式、布局等，使得文档结构更加清晰，增强可读性，使其更加美观。它还可以利用动画做一些特效，也可以在一定程度上与用户交互（如鼠标悬停、获得焦点）。此外，对于某些功能，我们首先想到的可能是使用JS，但当我们搞清楚该功能的内在逻辑，也可以用CSS实现，这算是对CSS功能的一种拓展，需要开发者对CSS熟练掌握并且经验丰富。虽然CSS有时可以替代JS实现某些功能，但具体使用哪种方法，开发者需要根据两种实现方法各自的优缺点，并考虑方法与整个项目的适配度等因素来选择。

个人认为CSS里的布局、动画和响应式设计比较有意思，应用也比较多，值得深入学习。

前端语言简记——CSS ｜ 青训营笔记