Question

例如，在Firefox控制台的此CSS副本中：

.page-newsletter-sign-up-confirmation .main .webform-confirmation div {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;      // Line 20979
}
.newsletter-sign-up {                   // Line 21044
    -ms-flex-pack: distribute;
    justify-content: space-around;       // This one is overriden by Line 20979
    border: solid 1px #0a5793;
}

SASS是：

.page-newsletter-sign-up-confirmation {
  .main {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .page-title-wrapper {
      @include hideH1();
    }
    .webform-confirmation {
      text-align: center;
      min-width: 800px;
      width: 950px;
      height: 360px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 5% auto 300px auto;
      background-color: white;
      @media (max-width: 1400px) {
        margin: 75px auto;
      }
      @media (max-width: 480px) {
        min-width: 0px;
        width: 100%;
        height: 500px;
        margin: 25px;
        justify-content: flex-start;
      }
      div {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        p {
          font-family: $font-light;
          font-size: 48px;
          font-weight: 300;
          line-height: 1;
          margin: 0;
          letter-spacing: -1px;
          @media (max-width: 480px) {
            font-size: 24px;
            position: absolute;
            width: 100%;
            top: 10%;
          }
        }
        hr {
          display: none;
          height: 5px;
          width: 450px;
          margin: 1em auto;
        }
        .links {
          display: block;
          height: 60px;
          @media (max-width: 480px){
            position: absolute;
            top: 30%;
          }
          a {
            @include blackButton;
            font-size: 12px;
            font-weight: 700;
            @media (max-width: 480px) {
              font-size: 14px;
              margin: 0 auto;
              display: block;
              width: 80%;
            }
          }
        }
      }
      //@supports (-ms-ime-align: auto) { /* Edge only due to bug https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/15947692/ */
      //  .newsletter-sign-up {
      //    justify-content: space-around;
      //    border: solid 1px #0a5793;
      //  }
      //}
    }
  }
}

.newsletter-sign-up {
  justify-content: space-around;
  border: solid 1px #0a5793;
}

但是，如果我在末尾删除.newsletter-sign-up，然后取消注释另一个，则它会正确地覆盖先前的声明。在Edge 18和Firefox 66中都会发生这种情况。

因此，这使我认为选择更具体的选择器优先于选择不具体的选择器？

Answer 1

是的，有几条规则（按此顺序应用）：内联css（html样式属性）覆盖样式标签和css文件中的css规则。较具体的选择器优先于较不具体的选择器。如果两个规则具有相同的特异性，则出现在代码后面的规则将覆盖以前的规则。

为什么，如果CSS属性是在之后声明的，为什么会被之前的声明覆盖

1 个答案: