在Blazor隔离CSS中如何无需类选择器选中组件根元素？

问题场景 #

我有Foo.razor组件代码如下：

<div class="foo">
   <div>Hello</div>
   <div>World</div>
</div>
<span class="foo2">
   Second root element
</span>

想要在Foo.razor.css中用CSS选择器选中组件的两个根元素，但不选中它们的子元素，希望不用额外添加类来实现。

试过*、:first-child、:first-of-type和:root这些选择器，都无法满足需求——因为Blazor底层会给组件内所有元素添加生成的哈希属性，比如*会被处理为*[b-qwj487ok39]，会选中所有带该属性的元素（包括子元素）。理论上*[b-qwj487ok39]:not([b-qwj487ok39] [b-qwj487ok39])这种选择器可行，但目前无法直接在隔离CSS中实现这种写法。

可行解决方案 #

1. 给根元素统一添加类（推荐）

这是最直接且易维护的方案，虽然需要加类，但成本极低：
修改Foo.razor：

<div class="foo component-root">
   <div>Hello</div>
   <div>World</div>
</div>
<span class="foo2 component-root">
   Second root element
</span>

然后在Foo.razor.css中：

.component-root {
  /* 你的根元素样式 */
}

这种方式逻辑清晰，不会出现选择器歧义，后续维护也方便。

2. 针对根元素类型选择+排除子元素

如果根元素类型固定（比如只有div和span），可以直接选择根元素类型，再重置子元素样式：

/* 选中根元素 */
div, span {
  /* 根元素样式 */
}

/* 排除子元素，重置或不设置样式 */
div > *, span > * {
  /* 重置子元素继承的样式，比如 margin: 0; padding: 0; 等 */
}

缺点是如果根元素类型多变，这种写法会非常繁琐。

3. 手动使用生成的哈希属性（不推荐）

可以直接写包含哈希的选择器，但因为哈希是Blazor自动生成的，组件修改后哈希会变化，需要手动更新，仅适合临时场景：

:where([b-qwj487ok39]):not([b-qwj487ok39] [b-qwj487ok39]) {
  /* 根元素样式 */
}

总结 #

优先选择给根元素加统一类的方案，兼顾可读性和可维护性，避免依赖Blazor底层的哈希属性实现。

内容的提问来源于stack exchange，提问作者Patrick Szalapski