亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

SASS樣式優(yōu)先於媒體查詢
P粉953231781
P粉953231781 2024-04-05 15:03:00
0
1
3825

我正在嘗試使用媒體查詢來覆蓋桌面裝置的樣式,但似乎不起作用。我將邊框顏色設(shè)為h2元素,並進(jìn)行了測(cè)試以更好地視覺化此問題。如您所見,h2的邊框顏色設(shè)定為黃色。

這是我的SASS樣式:

.hero{
    width: 100%;
    position: relative;
    background-color: $orange-color;
    background-image: url("../../../src/assets/images/gastro/gasto-item-chicken-buger.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    z-index: 0;
    .hero_content{ 
        flex-grow: 1;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        transform: translateY(-100px);
        z-index: 2;
        .container{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            .box{
                padding: 36px;
                display: flex;
                flex-wrap: wrap;
                text-align: center;
                justify-content: center;
                width: 50%;
                h2{
                    border: 2px solid yellow;
                    color: $c-white;
                    font-family: "CustomFont";
                    font-size: 4rem;
                    line-height: 1.1;
                    padding-bottom: 18px;
                    text-shadow: .0625rem .0625rem #000;
                    span{
                        color: $button-color;
                    }
                }
                h3{ 
                    color: $c-white;
                    font-family: $ff-title;
                    text-shadow: .0625rem .0625rem #000;
                    font-size: 2rem      
                }
            } 
        }
   }

}

這是同一頁底部的媒體查詢。如您所見,邊框顏色設(shè)定為紅色,但仍然顯示黃色邊框顏色,而應(yīng)該是紅色邊框顏色。只有在通用樣式中刪除黃色邊框顏色時(shí),它才會(huì)顯示紅色。

@media (min-width: 768px){    
    .hero{    
        .hero_content{
            .box{
                h2{
                    border: 2px solid red;
                    font-size: 4rem;
                }
                h3{
                    font-size: 2rem;
                }
            }
        } 
    }
}
P粉953231781
P粉953231781

全部回覆(1)
P粉348915572

問題在於你的主要CSS有更具體的選擇器,有效地

.hero .hero_content .container .box h2 { ... }

在媒體查詢中嘗試覆寫的是

.hero .hero_content .box h2 { ... }

所以第一個(gè)勝出:第一個(gè)中有四個(gè)類別選擇器,而第二個(gè)中只有三個(gè)。

根據(jù)我的個(gè)人經(jīng)驗(yàn),像SCSS或LESS這樣的東西的一個(gè)真正的負(fù)面影響是它們會(huì)引導(dǎo)你陷入這樣的陷阱。 CSS是一個(gè)非常難以「馴服」和控制的工具。

有一些技巧可以繞過這個(gè)問題,例如

.hero.hero.hero .hero_content .box h2 { ... }

用於媒體條件規(guī)則。這肯定會(huì)讓你感到不舒服。複雜的選擇器是一個(gè)陷阱,因?yàn)橐坏┠汩_始了,你就注定要永遠(yuǎn)陷入其中。

最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板