CSS代码中使用&符号出现多处报错的原因咨询

你遇到的报错由两个问题共同导致：

• 这段代码不是原生CSS，是SCSS（CSS预处理器语法），原生CSS不支持嵌套选择器和&父选择器标识符
• 你从网页复制代码时，HTML转义字符没有自动还原，代码里残留了"（对应双引号）、&（对应&符号），也会触发语法错误

&符号的作用 #

在SCSS语法中，&是父选择器占位符，嵌套书写时会自动替换为上层的选择器内容，用来简化选择器书写，避免重复写父级选择器。
示例：

// SCSS写法
input[type="radio"].toggle {
  display: none;
  & + label{
    cursor: pointer;
  }
}

编译为原生CSS后会自动转换为：

input[type="radio"].toggle {
  display: none;
}
input[type="radio"].toggle + label {
  cursor: pointer;
}

可选解决方案 #

方案1：直接转为原生CSS使用（无需额外编译环境） #

先还原所有转义符，再把嵌套结构展开，替换所有&为对应父选择器即可，整理后的可用代码如下：

body,html{
    background: #efefef;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100%;
    z-index: -1;
}

.btn{
    border: 3px solid #1a1a1a;
    display: inline-block;
    padding: 10px;
    position: relative;
    text-align: center;
    transition: background 600ms ease, color 600ms ease;
}

input[type="radio"].toggle {
    display: none;
}
input[type="radio"].toggle + label{
    cursor: pointer;
    min-width: 60px;
}
input[type="radio"].toggle + label:hover{
    background: none;
    color: #1a1a1a;
}
input[type="radio"].toggle + label:after{
    background: #1a1a1a;
    content: "";
    height: 100%;
    position: absolute;
    top: 0;
    transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1);
    width: 100%;
    z-index: -1;
}
input[type="radio"].toggle.toggle-left + label {
    border-right: 0;
}
input[type="radio"].toggle.toggle-left + label:after{
    left: 100%
}
input[type="radio"].toggle.toggle-right + label{
    margin-left: -5px;
}
input[type="radio"].toggle.toggle-right + label:after{
    left: -100%;
}
input[type="radio"].toggle:checked + label {
    cursor: default;
    color: #fff;
    transition: color 200ms;
}
input[type="radio"].toggle:checked + label:after{
    left: 0;
}

方案2：保留SCSS语法使用 #

先把代码里的转义符全部还原：

• 把所有"替换为"
• 把所有&替换为&
  还原后的代码就是合法的SCSS代码，在项目中配置Sass编译环境，将SCSS编译为CSS后即可正常使用。

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