Css 如何使用媒体查询覆盖默认样式

首先，很抱歉使用了很长的scss代码，这是我页脚设计的CSS结构，默认的CSS代码运行良好，但是当我在媒体查询中使用相同的类名时，我不得不编写！重要的是，在媒体查询中的每个CSS属性之后，在媒体查询中的大多数情况下，我都必须编写！重要信息：覆盖默认样式，不使用！重要的CSS代码内的媒体查询是不工作的，谁能帮我摆脱这个！重要的关键字或任何人都可以帮助正确地构造scss/css代码吗

  .footerWrapper {
          display: flex;
          flex-direction: column;

          .topBlock {
            max-width: 100%;
            display: flex;
            padding: 20px 30px;
            flex-direction: row;
            border: 1px solid $color-border;
            background-color: $color-bg-footer;
            flex-wrap: wrap;

            .leftTop {
              width: 40%;
              .heading {
                font-weight: bold;
                font-size: 24px;
                color: $color-body
              }

              .small {
                font-size: 14px;
                color: $color-body-light;
                text-align: left;
              }
            }

            .iconBlock {
              display: flex;
              flex-direction: row;
              padding-left: 25px;
              align-items: center;
              width: 50%;
              justify-content: space-between;

              .iconBox {
                  display: flex;
                  flex-direction: row;
                  align-items: center;
              }
              .iconStyle {
                  border-radius: 50%;
                  border: 2px solid $color-border;
                  width: 45px;
                  height: 45px;
                  .innerIcon {
                      line-height: 44px;
                      display: flex;
                      font-size: 20px;
                      align-items: center;
                      flex-direction: column;
                  }
              }

              .iconText {
                display: flex;
                flex-direction: column;
                margin-left: 18px;

                .iconSmallText {
                  font-weight: 600;
                  font-size: 12px;
                  color: $color-body-light;
                  text-align: left;
                  text-transform: uppercase;
                }

                .iconLargeText {
                  font-weight: bold;
                  font-size: 21px;
                  color: $color-body;
                  text-align: left;
                }
              }
            }
          }

          .secondBlock {
            max-width: 100%;
            background-color: $color-bg-primary;
            display: flex;
            flex-wrap: wrap;
            padding: 42px 30px;
            justify-content: space-around;
          }

          .thirdBlock {
            display: flex;
            flex-direction: row;
            width: 80%;
            margin: 0 auto;
            justify-content: space-around;
            padding: 20px 30px;

            .subscribeBlock {
                max-width: 50%;
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .social {
                display: flex;
                flex-direction: column;
                .socialText {
                    font-size: 15px;
                    color: $color-body;
                    margin-bottom: 16px;
                    font-weight: 600;
                    text-transform: uppercase;
                }
            }
            .socialAndApp {
                display: flex;
                flex-direction: row;
            }

            .logoText {
                font-size: 15px;
                color: $color-body;
                margin-bottom: 16px;
                font-weight: 600;
                text-transform: uppercase;
            }
          }

          .fourthBlock {
            max-width: 100%;
            background-color: $color-brand-primary;
            padding: 20px 30px;
            display: flex;
            justify-content: space-between;
            flex-direction: row;

            .bottomLeft {
                display: flex;
                flex-direction: row;
                .cards {
                    margin-left: 20px;
                }
                .reservedBlock {
                    display: flex;
                }
                .reservedText {
                    font-size: 13px;
                }
            }

            .bottomRight {
                width: 100%;
                max-width: 500px;
                text-transform: capitalize;
                display: flex;
                color: $color-body;
                font-size: 13px;
                justify-content: space-between;
            }
          }
          .linksBlock {
            display: flex;
            justify-content: center;
        }

        .bottomPanel {
            padding: 14px 29px 16px;
            font-size: 13px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            color: $color-body;
        }

        .bottomBlock {
            cursor: default;
            text-align: center;
        }


        .block {
            min-width: 137px;
            padding-right: 72px;
         }
         .link {
            display: block;
            margin: 2px 0 0;
            text-transform: capitalize;
            font-size: 13px;
            line-height: 2.38;
            color: $color-body;
            text-decoration: none;
        }
        .title {
            text-transform: uppercase;
            font-size: 15px;
            font-weight: bold;
            line-height: 1.46;
            color: $color-body;
            cursor: default;
            margin-bottom: 18px;
         }
        }

        //for xs mobile screen
        .footerWrapper {
            @media #{$max-mobile}{
                .leftTop {
                    width: 100% !important;
                    margin-bottom: 27px;
                }
                .iconLargeText {
                    font-size: 16px !important;
                }
                .heading {
                    font-size: 19px !important;
                }
                .topBlock {
                    flex-direction: column;
                }
                .iconBlock {
                    padding-left: 0 !important;
                    flex-direction: column !important;
                    align-items: flex-start !important;
                }
                .cards {
                    margin-left: 0 !important;
                }
                .bottomLeft {
                    display: flex;
                    flex-direction: column !important;
                    align-items: center !important;
                }
                .bottomRight {
                    flex-wrap: wrap;
                    margin-top: 18px;
                    line-height: 23px;
                    justify-content: space-around !important;
                }
                .subscribeBlock {
                    max-width: 100% !important;
                }
                .social {
                    margin-top: 25px;
                }
                .socialText {
                    text-align: center;
                    font-size: 12px !important;
                }
                .appLogo {
                    margin-top: 18px;
                }
                .logoText {
                    font-size: 12px !important;
                    text-align: center !important;
                }
            }
        }

        //Screen for tablet view
        .footerWrapper {
            @media only screen and (min-width: 768px) and (max-width: 1024px) {
                .leftTop {
                    width: 100% !important;
                    margin-bottom: 27px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                }
                .iconLargeText {
                    font-size: 17px !important;
                }
                .block {
                    min-width: 100px !important;
                    padding-right: 45px;
                }
                .heading {
                    font-size: 19px !important;
                }
                .iconBlock {
                    padding-left: 0 !important;
                    flex-direction: row;
                    width: auto !important;
                    justify-content: space-around !important;
                }

                .fourthBlock {
                    flex-direction: column;
                    align-items: center !important;
                }
                .cards {
                    margin-left: 0 !important;
                }
                .bottomLeft {
                    display: flex;
                    flex-direction: column !important;
                    align-items: center !important;
                }
                .subscribeBlock {
                    max-width: 100% !important;
                    padding-bottom: 25px !important;
                }

                .socialAndLogo {
                    display: flex !important;
                    flex-direction: row !important;
                    justify-content: space-around !important;
                }
            }

        }
@media only screen and (min-width: 769px) {
    .socialAndLogo {
        display: flex ;
        flex-direction: row ;
    }
}


//Screen for tablet view
.footerWrapper {
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
        .leftTop {
            width: 100% !important;
            margin-bottom: 27px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .iconLargeText {
            font-size: 17px !important;
        }
        .block {
            min-width: 100px !important;
            padding-right: 45px;
        }
        .title {
            font-size: 14px;
        }
        .heading {
            font-size: 19px !important;
        }
        .topBlock {
            flex-direction: column;
        }
        .iconBlock {
            padding-left: 0 !important;
            flex-direction: row;
            width: auto !important;
            justify-content: space-around !important;
        }
        .iconBox {
            margin-bottom: 16px;
        }

        .fourthBlock {
            flex-direction: column;
            align-items: center !important;
        }
        .reservedBlock {
            flex-direction: column;
            .reservedText {
                text-align: center;
                padding-bottom: 11px;
            }
        }
        .cards {
            margin-left: 0 !important;
        }
        .bottomLeft {
            display: flex;
            flex-direction: column !important;
            align-items: center !important;
        }
        .bottomRight {
            flex-wrap: wrap;
            margin-top: 18px;
            line-height: 23px;
            justify-content: space-around !important;
        }
        .reservedText {
            margin-top: 20px;
        }
        .thirdBlock {
            display: flex;
            flex-direction: column;
        }
        .subscribeBlock {
            max-width: 100% !important;
            padding-bottom: 25px !important;
        }

        .socialAndLogo {
            display: flex !important;
            flex-direction: row !important;
            justify-content: space-around !important;
        }
        .block:nth-child(4) {
            display: none;
        }
        .block:nth-child(5) {
            display: none;
        }
    }

}


@media only screen and (min-width: 1200px) and (max-width: 1500px) {
    .bottomRight {
        margin-right: 114px;
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1439px) {
    .block:nth-child(4) {
        display: none;
    }
    .block:nth-child(5) {
        display: none;
    }
}

@media only screen and (min-width: 1500px) {
    .topBlock, .fourthBlock {
    padding: 20px 190px !important;
 }
}

一般的答案是专一性，其中媒体查询中的规则专一性低于原始规则

也就是说，在这个规则中，它只有一个类，.topblock{…}

但是它的原始规则似乎有2个类。footerWrapper.topBlock{…}

要使其在媒体查询中起作用，请执行以下操作

@media only screen and (min-width: 1500px) {
    .footerWrapper .topBlock, .footerWrapper .fourthBlock {
    padding: 20px 190px;
 }
}

---

造成这种情况的正常原因是特殊性，即编译后的媒体查询规则低于以前的规则。为了能够真正找到真正的原因，我们需要一个最小的工作代码片段来重现您遇到的问题，仅仅CSS是不够的。请将代码适当缩进以便易于阅读……这样做也会更容易发现问题。嘿@LGSon，html代码处于react状态，我是否应该用react编辑代码并发布一个一般性答案，如果这解决了问题，你可以留下来，因为isI会让你知道@LGSon，如果可行，我会投赞成票谢谢@LGSon，现在我的代码在没有任何限制的情况下工作！重要的

@media only screen and (min-width: 1500px) {
    .footerWrapper .topBlock, .footerWrapper .fourthBlock {
    padding: 20px 190px;
 }
}