SASS-Stile haben Vorrang vor Medienabfragen

Question

Ich versuche, Medienabfragen zu verwenden, um Stile für Desktop-Geräte zu überschreiben, aber es scheint nicht zu funktionieren. Ich habe die Rahmenfarbe auf das h2-Element festgelegt und einen Test durchgeführt, um das Problem besser zu veranschaulichen. Wie Sie sehen können, ist die Rahmenfarbe von h2 auf Gelb eingestellt.

Das ist mein SASS-Stil:

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

}

Hier ist die Medienabfrage unten auf derselben Seite. Wie Sie sehen können, ist die Randfarbe auf Rot eingestellt, es wird jedoch immer noch die gelbe Randfarbe angezeigt, obwohl es sich um eine rote Randfarbe handeln sollte. Es erscheint nur rot, wenn ich die gelbe Randfarbe im Universalstil entferne.

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

Answer 1

问题在于你的主要CSS具有更具体的选择器，有效地

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

在媒体查询中尝试覆盖的是

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

所以第一个胜出：第一个中有四个类选择器，而第二个中只有三个。

根据我的个人经验，像SCSS或LESS这样的东西的一个真正的负面影响是它们会引导你陷入这样的陷阱。CSS是一个非常难以“驯服”和控制的工具。

有一些技巧可以绕过这个问题，例如

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

用于媒体条件规则。这肯定会让你感到不舒服。复杂的选择器是一个陷阱，因为一旦你开始了，你就注定要永远陷入其中。