我的媒体查询不起作用

Question

有谁知道为什么我的媒体查询代码不起作用？谢谢！

.table tr[data-tt-parent-id="1"]:nth-child(odd) {
    background-color:blue;
}
li[data-tt-parent-id="1"]:nth-child(odd) {
    background-color:blue;
}

我的github https://github.com/kmfb/udacityProjects/tree/master/column%20drop

中的更多细节

Answer 1

只需将@media移到css页面的底部即可 检查工作示例 干杯，
https://jsfiddle.net/frc7r123/

Answer 2

它有效，但您需要将媒体查询放在其他CSS下面。否则它不会覆盖任何东西。

Answer 3

这主要取决于您的项目，因为在一天结束时，所有这些都是关于维护并轻松添加更多内容。

所以，如果您正在开发一个只有少量媒体查询的项目，我建议将它们全部放在样式表的底部，但在其上面添加注释以使其明确，并且更容易找到它后面。

但是，如果您知道您的媒体查询中会定制许多属性，并且还定义了各种设备，那么我建议将它们分开，只是出于可读性/维护原因。