Css 安培生Sass选择器不'；t在样式化组件中使用同级选择器 从“样式化组件”导入样式化； const Styles=styled.div` .App{ &__输入{ 宽度：200px； 背景颜色：橙色； &：焦点{ 背景颜色：绿黄色； } } &__钮扣{ 背景颜色：灰色； } /*这很有效*/ &__输入：焦点+.应用程序按钮{ 背景颜色：绿黄色； } /*这并不重要*/ &__输入：焦点+&_按钮{ 背景颜色：绿黄色； } } `; 导出默认函数App（）{ 返回( 点击 ); }

正如您在代码中看到的，我希望

&

指的是

.App

，因为它在其他地方以及节点中工作

这是样式化组件中的错误还是我在这里遗漏了什么

---

这里有一个复制问题的方法。

也许问题出在这里：

因为父选择器可以被h1这样的类型选择器替换，所以只允许在复合选择器的开头使用它，在复合选择器的开头也允许使用类型选择器

它还说：

它还可以用于在特定上下文中设置外部选择器的样式

在你的情况下，这似乎不是一个合适的“背景”

请参阅SASS父选择器文档

编辑 当我们在不同于

样式化组件的多个上下文中对其进行测试时，第一个选项得到确认：

这是
样式化组件中的一个bug
我上面写的代码在node-sass包中运行良好。我只是在使用样式化组件时才遇到这个问题。如果你想写``.search{&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&。（更新答案顺便说一句）。
import styled from "styled-components";

const Styles = styled.div`
  .App {
    &__input {
      width: 200px;
      background-color: orangered;
      &:focus {
        background-color: greenyellow;
      }
    }
    &__button {
      background-color: grey;
    }
    /* this works */
    &__input:focus + .App__button {
      background-color: greenyellow;
    }

    /* this doesn't */
    &__input:focus + &__button {
      background-color: greenyellow;
    }
  }
`;

export default function App() {
  return (
    <Styles>
      <div className="App">
        <input className="App__input" />
        <button className="App__button">click</button>
      </div>
    </Styles>
  );
}