css 变量

变量声明

--变量名 用来声明变量，使用 var(--变量名) 来使用变量。

注意事项

CSS变量声明只可用于属性值，不可用以属性名。
CSS变量不支持多个同时声明。
CSS变量使用的合法性。
CSS变量与属性单位结合需要使用 * 乘法。
CSS变量的声明时可相互调用声明的变量。

作用域

: root 取全局作用域，div 取所有的div元素，#alert 取所有id为alert的元素使用(以此类推)。

伪类和伪元素

伪类：以冒号(:)开头，用于选择处于特定状态的元素。
伪元素：以双冒号(::)开头，用于在文档中插入虚构的元素。

伪类

:before 向选定的元素前插入内容。使用content 属性来指定要插入的内容。
:after 向选定的元素之后插入内容。使用content 属性来指定要插入的内容。
:active 元素处于活动状态时。
:focus 元素已获取焦点时。
:hover 元素处于悬浮状态时。
:link 链接未访问时。
:visited 链接已访问时。
:first-child 元素是首个子元素时。
:last-child 元素是最后一个子元素时。
:nth-child() 元素是第 n 个子元素时。
:nth-last-child() 元素是倒数第 n 个子元素时。
:only-child 元素是唯一子元素时。
:first-of-type 元素是首个特定类型的子元素时。
:last-of-type 元素是最后一个特定类型的子元素时。
:nth-of-type() 元素是第 n 个特定类型的子元素时。
:nth-last-of-type() 元素是倒数第 n 个特定类型的子元素时。
:only-of-type 元素是唯一的特定类型的子元素时。
:not 不满足指定条件时。
:target 元素 id 匹配到哈希值时。
:root 元素是文档树的根元素时。
:lang() 匹配到指定语言时。
:empty 元素处于没有子元素状态时。
:invalid 和 :valid 表单项是否有效。
:required 和 :optional 表单项是否必填。
:in-range和 :out-of-range 表单项是否超出范围。
:read-only和 :read-write 表单项是否只读。
:enabled和 :disabled 表单项是否禁用。
:fullscreen 当前处于全屏显示模式时。
:blank 输入框处于输入为空状态时。
:dir() 匹配到特定文字书写方向时。

伪元素

::first-letter 选中块状元素中的首字母。
::first-line 选中首行。
::before 在之前创建一个不在文档树中的元素。
::after 在之后创建一个不在文档树中的元素。
::placeholder 选中表单元素的占位文本。
::file-selector-button 选中类型为 file 的 input 里面的 button。
::selection 选中被用户高亮的部分。
::backdrop 选中视觉聚焦元素后面的背景元素。
::marker 选中 list 的 marker。

函数

attr() 用来选择元素的属性值，用法：attr(html元素的属性名)，正常搭配css content一起使用。
calc() 允许在声明 CSS 属性值时执行一些计算。
min() 从一个逗号分隔的表达式列表中选择最大（正方向）的值作为属性的值。
max() 从一个逗号分隔的表达式列表中选择最小的值作为属性的值。
clamp() 把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。
linear-gradient() 创建一个线性渐变的图像，需要设置一个起点一个方向，还可以定义角度起始颜色等。
radial-gradient() 创建一个径向渐变的图像，渐变由中心点定义，必须设置两个终止色。 conic-gradient() 角向渐变。
repeating-linear-gradient() 创建重复的线性渐变图像。
rgb()、rgba()、hsl()、hsla() 颜色相关（定义元素）。
translate 位置变换：translate()、translateX()、translateY()、translate3d()
rotate 旋转变换：rotate()、rotate3d()、rotateX()、rotateY()、rotateZ()
skew 倾斜变换：skew()、skewX()、skewY()
scale 缩放变换：scale()、scale3d()、scaleX()、scaleY()、scaleZ()