ReSharper 2025.2 Help

CSS 中的编码辅助

ReSharper 的大多数编码辅助功能也支持 CSS。 您可以在 编码辅助 部分的相应主题中找到关于这些功能的详细信息。 在该部分的主要主题中,您还可以找到功能矩阵并检查 CSS 中具体支持的内容。

在本主题中,您可以找到一些在 CSS 中使用编码辅助功能的示例。

语法高亮

ReSharper 会高亮显示选择器、属性、属性值、规则(例如 @import@media )、可用作属性值的函数、伪类等。 CSS 的默认语法高亮:

ReSharper:CSS 中的语法高亮

除了 ReSharper 支持的所有文件类型通用的标准语法高亮外,它还为 CSS 文件提供了一些特殊功能。 任何颜色值都会用相应的颜色下划线标记,无论它是如何定义的(颜色名称、十六进制代码或 RGB 代码)。

ReSharper:CSS 中的语法高亮

当您将鼠标悬停在颜色值上时,会出现一个工具提示。 如果颜色是 CSS(CSS 和 HTML)规范中定义的颜色之一,则颜色名称会显示在图标旁边;否则,工具提示中会显示相应颜色值的十六进制代码和 RGB 代码。

请参阅 颜色辅助 了解有关定义颜色和 选择颜色 对话框的更多信息。

代码补全

ReSharper 在 CSS 文件以及可以使用 CSS 的其他文件类型中提供其专属的 IntelliSense。 它可以帮助您补全 HTML 标签名称,包括 HTML 5 引入的标签。

ReSharper:CSS 中的代码补全
ReSharper:CSS 中的代码补全

实际上,当您指定选择器时,ReSharper 的代码补全在多种场景下都能提供帮助。 例如,它会在冒号后提供可用伪类的列表。

ReSharper:CSS 中的代码补全

当然,ReSharper 的代码补全会建议可用的属性……

ReSharper:CSS 中的代码补全

……以及属性值:

ReSharper:CSS 中的代码补全

此外,当您在 class 属性的值中调用代码补全时,ReSharper 会建议可用的类……

ReSharper:CSS 中的代码补全

……以及在 HTML 或 ASP.NET 标记文件中 id 属性内的可用 id:

ReSharper:CSS 中的代码补全

上下文操作示例

ReSharper 提供了一组针对 CSS 代码的 上下文操作。 您可以在 ReSharper 选项 的 代码编辑 | CSS | 上下文操作 页面中找到这些操作的完整列表。 如果需要,您还可以通过此页面禁用某些操作。

一旦某个上下文操作在当前光标位置可用,ReSharper 会在光标左侧显示相应的 操作指示器 ThemedIcon.ContextAction.Screen.(Gray).png。 然而,有时 ReSharper 会为当前光标位置提供多个上下文相关的功能。 在这种情况下,会显示与优先级最高的操作对应的操作指示器,其他所有操作仅在您通过单击操作指示器或按下 Alt+Enter 展开 操作列表 时才会出现。上下文操作的优先级最低,因此它们通常出现在操作列表的底部。

以下是一些 CSS 上下文操作的示例:

要定义或更改颜色,请应用以下上下文操作。 会出现 选择颜色 对话框,您可以选择所需的任何颜色:

ReSharper:CSS 中的上下文操作

快速文档

您可以从文本编辑器或 文件结构 窗口调用快速文档。

查看 CSS 元素的快速文档

  1. 将插入符放置在 CSS 文件或标记文件中的属性、函数、伪元素、伪类或媒体功能上。

  2. Control+Q 或从主菜单中选择 ReSharper | 编辑 | 显示快速文档快速文档 弹出窗口显示对应元素的摘要信息:

    ReSharper:CSS 中的快速文档

如果您需要更多信息,请单击 阅读更多内容 直接导航到规范。

正在重新排列代码

代码重排 功能支持 CSS 文件,允许您快速重排 CSS 代码的元素和逻辑块。

最后修改日期: 2025年 9月 27日