所以我想针对某个类的 child 在屏幕宽度满足一定宽度时有不同的属性。但是,@media
查询对 child 不起作用,除非我应用了 !important
。这是我遗漏的某种特殊性问题吗?
HTML:
<div class=test>
<div class="a">
test block1
</div>
<div class="b">
test block2
</div>
</div>
SCSS:
.test {
display: flex;
@media only screen and (max-width: 500px) {
display: block;
div + div {
margin: 0;
}
}
div + div {
margin-left: 5px;
}
> div {
width: 50px;
}
}
.a {
background-color: red;
}
.b {
background-color: blue
}
最佳答案
看看这个fiddle .你需要改变媒体查询的位置
.test {
display: flex;
div + div {
margin-left: 5px;
}
> div {
width: 50px;
}
@media only screen and (max-width: 500px) {
display: block;
div + div {
margin: 0;
}
}
}
.a {
background-color: red;
}
.b {
background-color: blue
}
关于html - scss - 类中的@media 查询不适用于子选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50074873/