原生嵌套CSS选择器中:host()与:hover结合的正确写法咨询

首先你遇到的问题核心是原生CSS嵌套的&指代规则与浏览器支持情况。你写的代码：

:host {
    color:red;
    &:hover {
        color: blue;
    }
}

语法本身符合原生CSS嵌套规范，理论上会被解析为：

:host { color: red; }
:host:hover { color: blue; }

如果没生效，先排查以下关键点：

1. 确认浏览器版本 #

原生CSS嵌套需要对应浏览器版本支持：

• Chrome/Edge: 112+
• Firefox: 118+
• Safari: 16.5+
  若浏览器版本低于上述要求，嵌套语法不会被解析，自然无法生效。

2. 适配函数式伪类的嵌套写法 #

如果浏览器支持但仍不生效，可以尝试:host()函数式伪类的嵌套写法，和手动写:host(:hover)效果一致：

:host {
  color: red;
  &(:hover) {
    color: blue;
  }
}

这段代码会被解析为:host(:hover)，部分场景下这种写法的优先级表现更稳定。

3. 规避样式隔离陷阱 #

确保嵌套样式写在Web Components的Shadow DOM内部<style>标签中，:host选择器仅在Shadow DOM的样式作用域内生效，外部样式表无法通过:host控制组件宿主元素。

实用嵌套示例（针对Web Components） #

原生CSS嵌套对Web Components并非无用，这些场景能大幅简化样式代码：

嵌套子元素样式 #

:host {
  padding: 1rem;
  border: 1px solid #eee;

  .title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;

    &:hover {
      color: #2563eb;
    }
  }

  .content {
    line-height: 1.6;
  }
}

解析后等价于：

:host { padding: 1rem; border: 1px solid #eee; }
:host .title { font-size: 1.5rem; margin-bottom: 0.5rem; }
:host .title:hover { color: #2563eb; }
:host .content { line-height: 1.6; }

结合:host-context()的嵌套 #

:host {
  background: #fff;

  &-context(.dark-mode) {
    background: #1f2937;
    color: #f9fafb;
  }
}

解析后等价于：

:host { background: #fff; }
:host-context(.dark-mode) { background: #1f2937; color: #f9fafb; }

嵌套属性选择器 #

:host {
  display: block;

  &[disabled] {
    opacity: 0.6;
    pointer-events: none;
  }
}

解析后等价于：

:host { display: block; }
:host[disabled] { opacity: 0.6; pointer-events: none; }

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