css - 我该如何修复这个 css 代码？以及 & ~ 是如何工作的？

Question

我有这个CSS代码。它是网站抽屉导航的一部分。我从这个网站得到:

https://codepen.io/cassiocardoso/pen/fjqLp

但是这段代码不起作用，我用 css validator 检查了它，它有错误。而且我不明白 & ~ 是如何工作的!任何人都可以帮助我它的错误是什么以及我该如何解决它？

非常感谢

#mobile-menu-checkbox {
display: none;

&:checked {
  & ~ #mobile-menu-overlay {
     display: block;
  }

& ~ .mobile-menu {
  visibility: visible;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
}
}

Answer 1

很可能您在普通 css 中使用了 LESS 语法。这些是特定于 LESS 的继承运算符。在你的元素中安装 less 到 css 编译器