使用 @media 查询更改 nth-child() 属性答案

【问题标题】：Changing the nth-child() attribute with @media queries使用 @media 查询更改 nth-child() 属性
【发布时间】：2013-03-21 16:36:04
【问题描述】：

我目前正在尝试使用@media 查询更改 nth-child() 属性，但由于某种原因，媒体查询不会影响它。我正在尝试做这样的事情。

@media all (min-width:641px) {
   .photo:nth-child(4n) {
       margin: 0 25px 25px 0;
   }

@media all (min-width: 1000px) {
   .photo:nth-child(3n) {
       margin: 0 25px 25px 0;
   }

它与 (4n) 没有变化。

有人知道发生了什么吗？我是不是在看东西？

提前致谢！

【问题讨论】：

您缺少 @media 块的右大括号。
“它没有从 (4n) 改变”是什么意思？你的意思是（4n）还在生效，你想在第二条规则中取消它？

标签： css media-queries css-selectors

【解决方案1】：

也许您对.photo:nth-child 的初始定义是在级联中的媒体查询定义之后并被覆盖。如果是，请在定义后删除媒体查询或尝试将!important 放在定义后。

还要考虑您是否想要min-width 或max-width。

这些只是对第一印象的假设。问题还不是很清楚...

【讨论】：

对不起，我不能说得更清楚，但你确实帮助我找到了答案。谢谢！