Gaya SASS diutamakan daripada pertanyaan media

Question

Saya cuba menggunakan pertanyaan media untuk mengatasi gaya untuk peranti desktop tetapi ia nampaknya tidak berfungsi. Saya menetapkan warna sempadan kepada elemen h2 dan melakukan ujian untuk menggambarkan masalah dengan lebih baik. Seperti yang anda lihat, warna sempadan h2 ditetapkan kepada kuning.

Ini adalah gaya SASS saya:

.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      
                }
            } 
        }
   }

}

Berikut ialah pertanyaan media di bahagian bawah halaman yang sama. Seperti yang anda lihat, warna jidar ditetapkan kepada merah tetapi ia masih menunjukkan warna jidar kuning apabila ia sepatutnya warna sempadan merah. Ia hanya kelihatan merah jika saya mengalih keluar warna sempadan kuning dalam gaya universal.

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

Answer 1

Masalahnya ialah CSS utama anda mempunyai pemilih yang lebih khusus, dengan berkesan

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

Apa yang anda cuba bincangkan dalam pertanyaan media anda ialah

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

Jadi yang pertama menang: terdapat empat pemilih kelas dalam yang pertama, manakala hanya ada tiga dalam yang kedua.

Dari pengalaman peribadi saya, satu sisi negatif sebenar perkara seperti SCSS atau LESS ialah ia boleh membawa anda ke dalam perangkap seperti ini. CSS ialah alat yang sangat sukar untuk "dijinakkan" dan dikawal.

Terdapat beberapa helah untuk memintas masalah ini, seperti

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

Untuk peraturan bersyarat media. Ini pasti akan membuatkan anda berasa tidak selesa. Pemilih kompleks adalah perangkap kerana sebaik sahaja anda bermula, anda pasti akan terperangkap di dalamnya selama-lamanya.