首先抱歉长 scss 代码，这是我页脚设计的 CSS 结构，默认 CSS 代码工作正常，但是当我在媒体查询中使用相同的类名时，我必须写 !重要 在媒体查询中的每个 CSS 属性之后，在媒体查询的大多数情况下，我必须写 !important 来覆盖默认样式，没有 !important 媒体查询中的 CSS 代码不起作用，任何人都可以帮助我获得摆脱这个 !important 关键字，或者任何人都可以协助如何正确构建 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 {...}
@media only screen and (min-width: 1500px) {
.topBlock, .fourthBlock {
padding: 20px 190px !important;
}
}
但它的原始规则似乎有 2 个类 .footerWrapper .topBlock {...}
所以为了在媒体查询中工作，这样做
@media only screen and (min-width: 1500px) {
.footerWrapper .topBlock, .footerWrapper .fourthBlock {
padding: 20px 190px;
}
}
关于css - 如何使用媒体查询覆盖默认样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46412652/