Question

我找到了一个我希望使用http://codepen.io/katmai7/pen/fyzuH的开关。上面的链接有一个工作示例，但代码中有错误，我通过代码检查器运行它，但无法弄清楚如何解决它。你知道怎么解决吗？以下是代码检查员所说的内容：

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 : "" &amp;
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;
  }

/ 一些上下文 /

  &:before{
    position: absolute;
    display: block;
    width: 95%;
    height: 60%;
    border-radius: 20px;
    background: #fff;
    content: "";
    opacity: .03;
  }

  .icon-off, .icon-eye-open{
    position: absolute;
    z-index: 2;
    display: block;
    line-height: 25px;
    font-size: 18px;
  }

  .icon-eye-open{
    left: 5px;
    color: #EDD6CD;
    text-shadow: 0 1px 0 #97614B;
  }

  .icon-off{
    top: 1px;
    right: 5px;
    color: #6D6F70;
  }

  .slide{
    position: absolute;
    top: -1px;
    left: -2px;
    z-index:5;
    width: 25px;
    height: 25px;
    border: 1px solid #171718;
    border-radius: 50%;
    background: linear-gradient(to bottom, rgba(64,65,66,1) 0%,rgba(30,30,31,1) 100%);
    box-shadow:inset 0 1px 2px 0 rgba(93,94,95, .8), 1px 3px 5px -2px rgba(0,0,0, .7);
    transition: left .4s ease-in, border-color .4s ease-in .1s;

    &:after{
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: linear-gradient(to bottom, rgba(243,232,223,1) 0%,rgba(204,169,140,1) 100%);
      content: "";     
      opacity: 0;
      transition: opacity .4s ease .1s;
    }
  }
}

input[type=checkbox]{
  display: none;

  &:checked{
    + .switch{
        border-color: #4D2318;
        box-shadow: 0 1px 1px 0 rgba(130,132,134, .6), inset 0 4px 0 -3px rgba(0,0,0, .3), 0 0 15px 0 rgba(213,147,99, .7);

        &:after{
          opacity: 1;
        }

        .slide{
          left: 29px; 
          border-color: #704F3F;
            &:after{
              opacity: 1;
            }
        }
    }
  }
}

Answer 1

您正在使用LESS语法的CSS解析器，这肯定会抛出错误。

LESS允许这样的选择器嵌套：

.wrap {
    /* some css */
    .line {
        /* some more CSS */
    }
}

你不能在纯CSS中这样做，这就是你的CSS检查器抛出所有这些错误的原因。代码基本上等同于：

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

CSS错误需要修复

1 个答案: