我正在尝试使用媒体查询来覆盖桌面设备的样式，但似乎不起作用。我将边框颜色设置为h2元素，并进行了测试以更好地可视化此问题。如您所见，h2的边框颜色设置为黄色。
这是我的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
}
}
}
}
}
这是同一页底部的媒体查询。如您所见，边框颜色设置为红色，但仍然显示黄色边框颜色，而应该是红色边框颜色。只有在通用样式中删除黄色边框颜色时，它才显示红色。
@media (min-width: 768px){
.hero{
.hero_content{
.box{
h2{
border: 2px solid red;
font-size: 4rem;
}
h3{
font-size: 2rem;
}
}
}
}
} 
问题在于你的主要CSS具有更具体的选择器，有效地
.hero .hero_content .container .box h2 { ... }在媒体查询中尝试覆盖的是
.hero .hero_content .box h2 { ... }所以第一个胜出：第一个中有四个类选择器，而第二个中只有三个。
根据我的个人经验，像SCSS或LESS这样的东西的一个真正的负面影响是它们会引导你陷入这样的陷阱。CSS是一个非常难以“驯服”和控制的工具。
有一些技巧可以绕过这个问题，例如
.hero.hero.hero .hero_content .box h2 { ... }用于媒体条件规则。这肯定会让你感到不舒服。复杂的选择器是一个陷阱，因为一旦你开始了，你就注定要永远陷入其中。