Blazor中::deep伪选择器在Rider中出现未知警告的解决方法

Rider对::deep的支持情况 #

JetBrains Rider完全支持Blazor CSS隔离里的::deep伪选择器，这个警告只是IDE的CSS语法检查没识别Blazor专属的伪选择器，属于误报。

消除警告的几种方法 #

1. 修改Rider的CSS检查规则 #

• 按Ctrl+Alt+S打开设置
• 找到Editor | Inspections | CSS | Unknown pseudo-element or pseudo-class
• 取消勾选这个检查项，或者把它的严重程度改成“弱警告”甚至“无”
• 保存设置后警告就会消失

2. 用>>>替代::deep #

Blazor允许用>>>作为::deep的别名，Rider能识别这个语法，不会弹出警告：

>>> th.country-name { width: 14rem; }

/* 条纹效果 */
 >>> tr:nth-child(even) {
    background: rgba(255,255,255,0.4);
}

/* 空行不折叠 */
>>> tbody tr { height: 1.8rem; }

3. 在CSS文件顶部加特殊注释 #

在样式文件开头加一句注释，告诉Rider这是Blazor隔离样式文件，部分版本的Rider会自动调整检查逻辑：

/* Blazor CSS Isolation */
::deep th.country-name { width: 14rem; }

/* 条纹效果 */
 ::deep tr:nth-child(even) {
    background: rgba(255,255,255,0.4);
}

/* 空行不折叠 */
::deep tbody tr { height: 1.8rem; }

内容的提问来源于stack exchange，提问作者Johan Hardon