html - 为什么 !important 是必需的？

Question

我相信特异性是正确的，并且我检查了编译的 CSS，但我必须包含 !important 才能使其正常工作。坦率地说，我因此有点生气。任何帮助将不胜感激，并随时帮助我清理其他一些代码，我知道它并不完美:)

// Content
.section {
  padding: clamp(50px, 5vh, 200px) 0;

  .section__content {
    width: clamp(300px, 60vw, 100vw);
    margin: 0 auto;

    h2 {
      font-family: $ff-header;
      font-size: clamp(24px, 1.1vw + 1rem, 50px);
      margin-bottom: 1.3rem;
      line-height: 1;
    }

    p {
      font-family: $ff-content;
      font-size: 1rem;
      line-height: 120%;
    }

    &.section--hasImage {
      display: flex;
      gap: 2rem;
      justify-content: space-between;
      align-items: center;

      .col {
        width: 45%;
      }
    }
  }
}

// Breakpoints
@media (max-width: 50em) {
  .hero {
    justify-content: center;

    .hero__content {
      text-align: center;
      margin: 0;

      h1 {
        font-size: clamp(30px, 10vw + 1rem, 2000px);
      }

      p {
        font-size: clamp(24px, 1vw + 1rem, 1800px);
      }
    }
  }

  section > .section__content {
    width: clamp(10px, 85vw, 85vw);

    &.section--hasImage {
      display: block !important;

      .col {
        width: 100% !important;

        &:last-of-type {
          margin-top: 2rem;
        }
      }
    }
  }
}

标签： htmlcsscss-specificity