CSS错误需要修复

CSS错误需要修复,css,Css,我找到了一个我想用的开关。在上面的链接中有一个工作示例,但代码中有错误,我通过代码检查器运行了这个示例,但无法找到如何修复它。你知道怎么修吗?下面是代码检查器所说的: Sorry! We found the following errors (6) URI : TextArea 27 .wrap Parse Error .line{ position: absolute; top: 50px; width: 100%; border-top: 1px solid #1B1B1C; bord

我找到了一个我想用的开关。在上面的链接中有一个工作示例,但代码中有错误,我通过代码检查器运行了这个示例,但无法找到如何修复它。你知道怎么修吗?下面是代码检查器所说的:

Sorry! We found the following errors (6)
URI : TextArea
27  .wrap   Parse Error .line{ position: absolute; top: 50px; width: 100%; border-top: 1px solid #1B1B1C; border-bottom: 1px solid #323334; }
28  .wrap   Parse Error }
43  .switch     Property user-select doesn't exist : none
45  .switch     Lexical error at line 45, column 3. Encountered: "&" (38), after : "" &
48  :hover  Parse Error .slide:after{ opacity: .05; }
49  :hover  Parse Error Lexical error at line 51, column 3. Encountered: "&" (38), after : "" 


html{
  height: 100%;
}

body{
  height: 100%;
  background: #C1D1DA;
  background: radial-gradient(ellipse at center, rgba(92,93,95,1) 0%,rgba(47,48,49,1) 100%);
}

.wrap{
  position:relative;
  margin: 100px auto;
  width: 90px;
  height: 100px;
  border: 1px solid #1F1F20;
  border-radius: 5px;
  background: linear-gradient(to bottom, rgba(58,59,60,1) 0%,rgba(28,28,29,1) 100%);
  box-shadow:inset 0 3px 4px -2px rgba(94,96,96, 1), 0 0 6px -1px rgba(0,0,0, .8), 0 2px 7px -1px rgba(0,0,0, .5);

  .line{
    position: absolute;
    top: 50px;
    width: 100%;
    border-top: 1px solid #1B1B1C;
    border-bottom: 1px solid #323334;
  }
}


.switch{
  position: relative;
  display: block;
  margin: 13px 17px;
  width: 55px;
  height: 25px;
  border: 1px solid #1A1A1B;
  border-radius: 20px;
  background: linear-gradient(to bottom, rgba(31,31,32,1) 0%,rgba(58,58,58,1) 100%);
  box-shadow: 0 1px 1px 0 rgba(130,132,134, .6), inset 0 4px 0 -3px rgba(0,0,0, .3);
  cursor: pointer;
  transition: box-shadow .5s ease .27s, border-color .5s ease .27s;
  user-select: none;

  &:hover{
    .slide:after{
      opacity: .05;
    }
  }

  &.p2{
    margin-top: 25px;
  }

  &:after{
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background: green;
    background: linear-gradient(to bottom, rgba(186,101,82,1) 0%,rgba(215,151,101,1) 100%);background: linear-gradient(to bottom, rgba(186,101,82,1) 0%,rgba(215,151,101,1) 100%);
    content: "";
    opacity: 0;
    transition: opacity .5s ease .27s;
  }
/一些背景/


您在更少的语法上使用CSS解析器,这肯定会引发错误

LESS允许进行如下选择器嵌套:

.wrap {
    /* some css */
    .line {
        /* some more CSS */
    }
}
在纯CSS中无法做到这一点,这就是CSS检查器抛出所有这些错误的原因。该准则基本上等同于:

.wrap { ... }
.wrap .line { ... }

哦非常感谢你!这就解释了。我确实注意到语法和我以前看到的有点不同,但我想可能是CSS3。
.wrap { ... }
.wrap .line { ... }