html - 错误 : colon expected css(css-colonexpected)

Question

我正在尝试创建一个。简单的 Angular 元素。在 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)

-at-rule 或选择器预期的 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;
}