Question

我正在一个项目上，并在下面放置了CSS代码。但是我在运行时遇到语法错误。

我已经彻底检查了代码，但无法解决问题。我验证了代码，并在下面出现了错误，但无法修复。任何帮助将不胜感激。

<style>
      body {
      margin: 0;
      padding: 1em;
      background: white;
      }

    [data-cc-digits] input:focus {
      outline: none;
    }

    .mdc-card__primary-action,
    .mdc-card__primary-action:hover {
      cursor: auto;
      padding: 20px;
      min-height: inherit;
    }

    [data-credit-card] [data-card-type] {
      transition: width 1.5s;
      margin-left: calc(100% - 130px);
    }

    [data-credit-card].is-visa {
      background: linear-gradient(135deg, #622774 0%, #c53364 100%);
    }

    [data-credit-card].is-mastercard {
      background: linear-gradient(135deg, #65799b 0%, #5e2563 100%);
    }

    .is-visa [data-card-type],
    .is-mastercard [data-card-type] {
      width: auto;
    }

    input.is-invalid,
    .is-invalid input {
      text-decoration: line-through;
    }

    span {
            display: inline-block;
            vertical-align: middle;
    }

    span.material-icons {
            font-size: 150px;
    }

    [data-credit-card] {
            width: 435px;
            min-height: 240px;
            border-radius: 10px;
            background-color: #5d6874;
    }

    [data-card-type] {
            display: block;
            width: 120px;
            height: 60px;
    }

    [data-cc-digits] {
            margin-top: 2em;
    }

    [data-cc-digits] > input {
            color: white;
            font-size: 2em;
            line-height: 2em;
            background: none;
            border: none;
            margin-right:0.5em;
    }

    [data-cc-info] {
            margin-top: 1em;
    }

    [data-cc-info] > input {
            color: white;
            font-size: 1.2em;
            border: none;
            background: none;
    }

    [data-cc-info] > input: nth-child(2) {
            padding-right: 10px;
            float: right;
    }

    [data-pay-btn] {
            position: fixed;
            width: 90%;
            border: solid 1px;
            bottom: 20px;
    }

    ::placeholder {
            color: #fff;
    }
    </style>

当我验证CSS代码时，我收到以下错误报告。

Unexpected token '<' at line 103, col 5.
This rule looks for recoverable syntax errors.

Unexpected token '/' at line 103, col 6.    
This rule looks for recoverable syntax errors.

Unexpected token 'null' at line 103, col 13.
Assure properties are in alphabetical order

[data-cc-info] > input: nth-child(2) { 
Expected a `FUNCTION` or `IDENT` after colon at line 88, col 24.

Answer 1

尝试在问题线上的冒号后面失去空格，例如

[data-cc-info] > input:nth-child(2) {

如何在CSS代码中修复此语法错误？

1 个答案: