css - 为媒体查询 CSS 中的每个第二个元素设置边距,之前为每三个元素设置边距

标签 css media-queries margin

需要为媒体查询中的每个第二个元素设置边距,之前每三个元素都有边距。

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

示范: CSS reset nth child rule

20px替换为原来的值,因为使用inherit会使它变为0。请避免使用!important

关于css - 为媒体查询 CSS 中的每个第二个元素设置边距,之前为每三个元素设置边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36814692/

相关文章:

javascript - 如果其他两个在 td 中不可用,则 Angularjs 显示 div

google-chrome - 框阴影过渡不起作用

css - 是否可以通过媒体查询仅针对我的主页?

CSS - Margin Top 属性不起作用

css - 居中菜单

css - 如何在响应式设计中使用 CSS3 多列模块?

javascript - 调整所有媒体的文本大小

css 响应宽度在右边距创建额外空间

html - float 右 div 上的左边距

html - CSS Inline-table 添加底部边距