0
全部首先對不起長期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;
}
}
正常的原因是_specificity_，其中編譯的媒體查詢規則低於先前的規則。爲了能夠真正找到真正的原因，我們需要一個最小工作代碼片段來重現您遇到的問題，只是CSS是不夠的。而且，請妥善縮進代碼，以便閱讀......並且在發現問題時也會更容易。 – LGSon
嘿@LGSon，html代碼是在反應，我應該編輯代碼與reactjs – wali
發表了一個普遍的答案，如果解決了它，你可以保持原樣 – LGSon