Question

我正在尝试创建一个。简单的角度项目。在编写代码的css文件/src/styles.css中，我面临被显示语法错误的问题。

body {
     margin: 0;
     background: #F2F2F2;
     font-family: 'Montserrat', sans-serif;
     height: 100vh;
}

#container {    display: grid;
    grid-template-columns: 70px auto;
    height: 100%;

    #content {
        padding: 30px 50px;

        ul {//error highlight saying: colon expected css(css-colonexpected)

            list-style-type: none;
            margin:0;padding:0;

            li {
                background: #fff;
                border-radius: 8px;
                padding: 20px;
                margin-bottom: 8px;

                a {
                    font-size: 1.5em;
                    text-decoration: none;
                    font-weight: bold;
                    color:#00A8FF;
                }

                ul {
                    margin-top: 20px;

                    li {
                        padding:0;

                        a {
                            font-size: 1em;
                            font-weight: 300;
                        }//Error highlight saying: at-rule or selector expected css(css-ruleselectorexpected)
                    }
                }
            }
        }
    }
}

错误消息显示为注释

显示的语法错误是： -冒号预期的css（css-colonexpected）

-规则或选择器预期的CSS（css-ruleselectorexpected）

Answer 1

您在SASS文件中使用有效的SCSS或.css带有嵌套类，因此显示错误。等效的css为：

body {
  margin: 0;
  background: #F2F2F2;
  font-family: "Montserrat", sans-serif;
  height: 100vh;
}

#container {
  display: grid;
  grid-template-columns: 70px auto;
  height: 100%;
}
#container #content {
  padding: 30px 50px;
}
#container #content ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#container #content ul li {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 8px;
}
#container #content ul li a {
  font-size: 1.5em;
  text-decoration: none;
  font-weight: bold;
  color: #00A8FF;
}
#container #content ul li ul {
  margin-top: 20px;
}
#container #content ul li ul li {
  padding: 0;
}
#container #content ul li ul li a {
  font-size: 1em;
  font-weight: 300;
}

Answer 2

您正在使用 CSS 文件中的 sass 。因此将显示此错误。其文件扩展名应为.sass或样式表应根据CSS语法进行编码。

在CSS中，就像：

    body {
  margin: 0;
  background: #F2F2F2;
  font-family: "Montserrat", sans-serif;
  height: 100vh;
}

#container {
  display: grid;
  grid-template-columns: 70px auto;
  height: 100%;
}
#container #content {
  padding: 30px 50px;
}
#container #content ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#container #content ul li {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 8px;
}
#container #content ul li a {
  font-size: 1.5em;
  text-decoration: none;
  font-weight: bold;
  color: #00A8FF;
}
#container #content ul li ul {
  margin-top: 20px;
}
#container #content ul li ul li {
  padding: 0;
}
#container #content ul li ul li a {
  font-size: 1em;
  font-weight: 300;
}

错误：冒号预期的CSS（CSS冒号期望）

2 个答案: