需要为媒体查询中的每个第二个元素设置边距,之前每三个元素都有边距。
.title:nth-child(3n+3) {margin-right:0 !important}
@media screen and (max-width:1160px) and (min-width:900px){
.title:nth-child(2n+2) {margin-right:0 !important}
}
由于某些原因,CSS 的底部没有覆盖顶部。它为第二个元素设置了边距,但保留了之前在 css 中设置的第三个元素的边距设置。
最佳答案
您需要重置every 3rd element
规则,将其包装在自己的媒体查询中或覆盖它:
.title:nth-child(3n+3) {margin-right:0}
@media screen and (max-width:1160px) and (min-width:900px){
.title:nth-child(3n+3) {margin-right: 20px;}
.title:nth-child(2n+2) {margin-right:0 }
}
jsFiddle: https://jsfiddle.net/9woaL5ho/
将20px
替换为原来的值,因为使用inherit
会使它变为0。请避免使用!important
。
关于css - 为媒体查询 CSS 中的每个第二个元素设置边距,之前为每三个元素设置边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36814692/