我试图用桌面设备的媒体查询来覆盖样式,但似乎行不通.我为h2元素设置了边框 colored颜色 ,并对其进行了测试,以便更好地显示此问题.如您所见,H2的边框 colored颜色 设置为黄色.
以下是我的粗鲁风格:
.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
}
}
}
}
}
这些是我在同一页底部的媒体查询.正如您可以看到的,边框设置为红色,但它仍然显示黄色,而它应该是红色边框 colored颜色 .只有当我删除常规样式中的黄色边框 colored颜色 时,才会显示红色.
@media (min-width: 768px){
.hero{
.hero_content{
.box{
h2{
border: 2px solid red;
font-size: 4rem;
}
h3{
font-size: 2rem;
}
}
}
}
}