## CSS-Doodle 选择器总结
CSS-Doodle 引入了自定义选择器,用于强大的基于网格的设计。`:doodle` 代表组件元素本身,覆盖外部 CSS。核心布局使用 `:container`,结合网格布局和可定制的 `gap`。
**关键选择器:**
* **`:nth(n)`:** 像 `:nth-child(n)` 一样选择单元格。
* **`@even` & `@odd`:** 选择偶数/奇数单元格,简化 `:nth-child(even/odd)`。
* **`@at(col, row)`:** 通过列和行定位特定单元格。
* **`@random([ratio])`:** 随机选择单元格(比例 0-1,默认 0.5)。
* **`@row(n)` & `@col(n)`:** 选择整行/整列。
* **`@match(expression)`:** 基于数学表达式,使用 `x`、`y`、`i` 变量定位单元格。
**函数:**
* **`@index`:** 返回单元格的索引。
* **`@pick(...)`:** 从列表中随机选择一个值。
* **`@rand(...)`:** 生成一个随机数。
* **`@calc(expr)`:** 评估计算。
* **`@shape(...)` & `@plot(...)`:** 为 `clip-path` 和背景生成形状和绘图。
* **`@shaders(...)`:** 应用 GLSL 着色器,实现复杂的视觉效果。
这些选择器和函数能够在 CSS 中实现动态、程序化的设计,允许使用最少的代码创建复杂的图案和动画。它们还支持别名以提高简洁性,并支持数学运算以进行高级自定义。