Question

我有一个CSS文件，我的编辑器有一个＆＃34;迷你地图＆＃34;和ASCII块文本标题，以便我可以更快地导航文件。

我有一个奇怪的错误，其中一些标题打破了CSS。

使用块注释或删除它们可以修复规则但有些工作无论如何ROUND标题和PLAYER标题之间的那些。

这是破碎的CSS：

@import url('https://fonts.googleapis.com/css?family=Roboto');

body {
  padding-top: 70px;
  padding-bottom: 35px;
}

//////////////////////////////////////////////////////////////////////////////////////////////
//  ##    ##    ###    ##     ## ####  ######      ###    ######## ####  #######  ##    ##  //
//  ###   ##   ## ##   ##     ##  ##  ##    ##    ## ##      ##     ##  ##     ## ###   ##  //
//  ####  ##  ##   ##  ##     ##  ##  ##         ##   ##     ##     ##  ##     ## ####  ##  //
//  ## ## ## ##     ## ##     ##  ##  ##   #### ##     ##    ##     ##  ##     ## ## ## ##  //
//  ##  #### #########  ##   ##   ##  ##    ##  #########    ##     ##  ##     ## ##  ####  //
//  ##   ### ##     ##   ## ##    ##  ##    ##  ##     ##    ##     ##  ##     ## ##   ###  //
//  ##    ## ##     ##    ###    ####  ######   ##     ##    ##    ####  #######  ##    ##  //
//////////////////////////////////////////////////////////////////////////////////////////////

.navbar {
    background-color: black;
    border-bottom: 2px solid white;
}

.navbar a {
    color: white;
    text-decoration: none;
}

.navbar a:hover {
    color: #9d9d9d;
    text-decoration: none;
}

.nav>li>a:focus, .nav>li>a:hover {
    background-color: black;
}

.navbar-toggle {
    border: 1px solid white;
    border-radius: 4px;
}

.icon-bar {
    background-color: white;
}


///////////////////////////////////////////////////////
//  ########  #######  ########  ##     ##  ######   //
//  ##       ##     ## ##     ## ###   ### ##    ##  //
//  ##       ##     ## ##     ## #### #### ##        //
//  ######   ##     ## ########  ## ### ##  ######   //
//  ##       ##     ## ##   ##   ##     ##       ##  //
//  ##       ##     ## ##    ##  ##     ## ##    ##  //
//  ##        #######  ##     ## ##     ##  ######   //
///////////////////////////////////////////////////////

.form-control-on-black {
    color: white;
    background-color: black;
    border: 1px solid white;
    border-radius: 4px;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.form-control-on-black:focus {
    border-color: white;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.btn-on-black {
    color: white;
    background-color: black;
    border-color: white;
}


/////////////////////////////////////////////////////////////////////////////////
//   ######  ########  ######   ##     ## ######## ##    ## ########  ######   //
//  ##    ## ##       ##    ##  ###   ### ##       ###   ##    ##    ##    ##  //
//  ##       ##       ##        #### #### ##       ####  ##    ##    ##        //
//   ######  ######   ##   #### ## ### ## ######   ## ## ##    ##     ######   //
//        ## ##       ##    ##  ##     ## ##       ##  ####    ##          ##  //
//  ##    ## ##       ##    ##  ##     ## ##       ##   ###    ##    ##    ##  //
//   ######  ########  ######   ##     ## ######## ##    ##    ##     ######   //
/////////////////////////////////////////////////////////////////////////////////

.jumbotron {
    margin-bottom: 20px;
}

//   ######  ####### #     # #     # ######
//   #     # #     # #     # ##    # #     #
//   #     # #     # #     # # #   # #     #
//   ######  #     # #     # #  #  # #     #
//   #   #   #     # #     # #   # # #     #
//   #    #  #     # #     # #    ## #     #
//   #     # #######  #####  #     # ######

#round-card {
    padding-bottom: 80px;
}

.card-space {
    color: #337ab7;
    border-bottom: 2px solid white;
}

.card-space:hover {
    color: #337ab7;
    border-bottom: 2px solid #337ab7;
}

#submit-card-btn {
    position: absolute;
    bottom: 35px;
    right: 60px;
}


//   ######  #          #    #     # ####### ######
//   #     # #         # #    #   #  #       #     #
//   #     # #        #   #    # #   #       #     #
//   ######  #       #     #    #    #####   ######
//   #       #       #######    #    #       #   #
//   #       #       #     #    #    #       #    #
//   #       ####### #     #    #    ####### #     #

#player-cards {
  background-color: black;
}

#card-nav-wrap {
    position: relative;
}

#card-nav-wrap>#left-fade {
    width: 50px;
    height: 100%;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
    background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
}

#card-nav-wrap>#right-fade {
    width: 50px;
    height: 100%;
    pointer-events: none;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
    background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
    background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
}

#card-nav {
    z-index: 1;
}


//    #####   #####  ####### ######  #######
//   #     # #     # #     # #     # #
//   #       #       #     # #     # #
//    #####  #       #     # ######  #####
//         # #       #     # #   #   #
//   #     # #     # #     # #    #  #
//    #####   #####  ####### #     # #######

#score {
  background-color: black;
  color: white;
  padding-bottom: 5px;
}

.label-czar {
    background-color: white;
    color: black;
}


///////////////////////////////////////////////////////
//   ######     ###    ########  ########   ######   //
//  ##    ##   ## ##   ##     ## ##     ## ##    ##  //
//  ##        ##   ##  ##     ## ##     ## ##        //
//  ##       ##     ## ########  ##     ##  ######   //
//  ##       ######### ##   ##   ##     ##       ##  //
//  ##    ## ##     ## ##    ##  ##     ## ##    ##  //
//   ######  ##     ## ##     ## ########   ######   //
///////////////////////////////////////////////////////

.card {
    position: relative;
}

.card p {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
}

.card-light{
  border: 3px solid black;
  color: black;
  background: white;
}

.card-dark{
  border: 3px solid black;
  color: white;
  background: black;
}

.card-big {
  width: 75%;
  max-width: 240px;
  height: 300px;
  margin: 0 auto;
  border-radius: 24px;
  padding: 5%;
}

.card-big p {
    font-size: 26px;
}

.card-small{
  width: 170%;
  max-width: 120px;
  height: 190px;
  border-radius: 12px;
  margin: 0 auto;
  padding: 5%;
}

.card-small p {
    font-size: 18px;
}

Answer 1

将//替换为/* */。

CSS中唯一有效的注释类型是第一个块/* */。内联评论//适用于Sass / Less。

CSS行注释打破了文件

1 个答案: