Question

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

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

但是此代码不起作用，我用css验证程序检查了它，它有错误。而且我不明白＆〜的工作原理！谁能帮助我，它的错误是什么，我该如何解决？

非常感谢

#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特有的继承运算符。在您的项目中少安装CSS编译器

Answer 2

该代码是使用LESS语法（类似于SASS）的CSS高级子集AKA： SCSS 。

因此，使用常规CSS验证器会使它失效。该代码将被解释，应使用正确的工具将其编译为CSS。
转换为CSS后，应转换为

#mobile-menu-checkbox {
  display: none;
}

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

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

&（后跟一个选择器）是对最接近的选择器的反向引用：

#someId {

    background: blue;

    &.red {                 /* same as #someId.red */
        background: red;
    }
}

Answer 3

使用@echo off :cancel shutdown /a :shut set a=%1 shutdown -s -f -t %a% cls set /p a="the computer will shut in:" %=% set /a a=%a%*60 if %a%=="a" call :cancel pasue call :shut pause文件，您的代码可以完美运行。

要使用less，请使用以下代码（我用less to css进行了转换）：

css

html,
body {
  font-family: 'Century Gothic', Sans-serif;
  font-size: 16px;
  line-height: 1.25;
  margin: 0;
  padding: 0;
}
#mobile-menu-checkbox {
  display: none;
}
#mobile-menu-checkbox:checked ~ #mobile-menu-overlay {
  display: block;
}
#mobile-menu-checkbox:checked ~ .mobile-menu {
  visibility: visible;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
#mobile-menu-overlay {
  background-color: rgba(0, 0, 0, 0.6);
  display: none;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
}
.mobile-menu {
  position: fixed;
  left: 0;
  z-index: 101;
  top: 0;
  visibility: hidden;
  width: 300px;
  height: 100%;
  background: #dcdcdc;
  color: white;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  padding: 10px;
}
.mobile-menu h1 {
  color: black;
}
#mobile-menu-btn {
  background-color: transparent;
  border: none;
  color: #222;
  font-size: 30px;
  font-weight: 300;
  left: 0;
  line-height: 1.6em;
  position: relative;
  padding: 0;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
header {
  background-color: #333;
  padding: 0.5em;
}
header .menu-link {
  color: #fff;
  text-transform: uppercase;
}
#items {
  line-height: 1.75;
}

如何解决此CSS代码？以及＆〜的运作方式？

3 个答案: