unocss rules

UnoCSS 是一款面向未来的设计系统构建工具，它支持原子化CSS（Atomic CSS）的构建。UnoCSS的规则（rules）是构建CSS的一个基本组成部分，它定义了如何生成特定的CSS类以及对应的样式。

UnoCSS 规则主要分为三种类型：
1. 前缀规则（Prefix rules）：这类规则根据前缀定义一组样式，例如：`hover:(bg-red-100)` 会生成 `:hover { background-color: #ffebee; }`。
2. 属性规则（Attribute rules）：这类规则通过HTML属性来定义样式，例如：`[class^="icon-"]:before { content: attr(class); }` 会将class属性以`icon-`开头的元素内的:before伪元素内容设置为class的值。
3. 属性组规则（Attribute group rules）：这类规则组合多个属性规则，可以更精确地匹配元素，例如：`[class*="color-"] { color: inherit; }` 会对所有class包含`color-`的元素应用样式。

UnoCSS 规则还可以通过自定义规则来扩展，以适应各种特定的设计需求。

相关问题

unocss插件配置

Unocss是一个轻量级的CSS模块化工具，它可以帮助你从大型CSS文件中提取和优化仅在特定页面或组件中使用的样式。下面是Unocss插件的基本配置步骤：

1. **安装**：
首先你需要安装Node.js，然后通过npm（Node包管理器）全局安装unocss命令行工具：

   npm install -g unocss

2. **创建配置文件**：
初始化项目时，你可以创建一个`.unocssrc.js`配置文件来定义哪些CSS规则应该被包含或排除。例如：

   module.exports = {
     input: 'src/**/*.css', // 输入的CSS文件路径
     output: 'dist/main.min.css', // 输出优化后的CSS文件路径
     rules: { /* 自定义规则，如忽略某些选择器 */
       media: false, // 去除媒体查询
       custom: ['.my-custom-selector'] // 添加自定义不优化的选择器
     }
   };

3. **运行插件**：
使用`unocss`命令行工具，传入配置文件：

   unocss .unocssrc.js --output styles.min.css

运行后，会生成一个仅包含实际使用的、精简过的CSS文件。

4. **定制选项**：
Unocss提供了很多选项供你根据需求调整，比如处理嵌套选择器、处理变量等。查看文档 (`npm run unocss --help`) 可获取更多信息。

unocss 语法加权重

### UnoCSS 中设置样式权重或优先级

在 UnoCSS 中，可以通过多种方式来控制样式的优先级。UnoCSS 是一个原子化 CSS 框架，它允许开发者通过组合简单的类名来自动生成所需的样式。

#### 使用 `!important`

为了确保某些样式具有更高的优先级，可以使用 `!important` 关键字。这会使得该样式声明覆盖其他任何相同属性的声明[^2]：

.class {
    color: red !important;
}

然而，在 UnoCSS 中直接编写自定义 CSS 并不是最推荐的做法。更常见的是利用框架本身提供的机制来调整优先级。

#### 利用选择器特异性

另一种方法是依靠选择器的具体度（specificity）。具体来说，可以通过增加更多特定的选择器来提升某条规则的重要性。例如，相比于单个 class 选择器 `.class` （其权重为 10），ID 选择器 `#id` 或者带有多个 class 的复合选择器 `.class1.class2` 将拥有更高的优先级[^4]。

对于 UnoCSS 用户而言，这意味着可以选择更加具体的预设类名称或者创建自己的高优先级实用工具类。

#### 自定义配置文件

如果上述两种方案仍无法满足需求，则还可以考虑编辑 UnoCSS 配置文件以引入新的 Atom 类并为其分配较高的重要性级别。通常情况下，这种操作涉及到修改项目的 uno.config.js 文件，并向 presets 添加额外选项。

下面是一个简单例子展示如何在一个假定的支持 UnoCSS 的项目里实现这一点:

// uno.config.js
import { defineConfig } from 'unocss'

export default defineConfig({
  rules: [
    ['my-high-priority-rule', { 'color': '#ff0000' }],
  ],
})

在这个例子中，`rules` 数组内的每一项都代表一个新的 Atom 类及其对应的样式定义；这些新加入的规则将会按照它们被加载顺序应用到页面上，因此放置位置也会影响最终效果。