媒体查询中nth-child调整div顺序失效，nav类未显示求助

你的问题源于两个关键错误：选择器匹配失效，以及父容器未启用支持order属性的布局模式，导致媒体查询规则无法被浏览器识别和生效。

1. 选择器匹配错误 #

你编写的.nav:nth-child(2)是试图匹配作为某父元素第2个子元素的.nav容器，但你的HTML结构中.nav是顶级容器，并非任何父元素的第2个子元素，因此这个选择器无法匹配到任何元素，浏览器自然不会加载这条规则。

你实际需要排序的是.nav下的第2个.nav-button子元素，正确选择器应为.nav .nav-button:nth-child(2)。

2. 缺少支持order的布局环境 #

order属性仅在Flexbox或Grid布局中生效，.nav容器默认是块级元素，未启用这两种布局时，即使设置order也不会产生任何效果。

修正后的完整代码 #

CSS部分 #

/* 先给.nav容器设置Flex布局，为子元素排序提供基础环境 */
.nav {
  display: flex;
  /* 可选：根据需求添加flex-wrap、justify-content等布局属性 */
  flex-wrap: wrap;
}

@media screen and (max-width:810px) and (min-width:413px) {
    /* 匹配.nav下的第2个.nav-button子元素，调整其排序位置 */
    .nav .nav-button:nth-child(2) {
        order: 2;
    }
}

验证步骤 #

• 打开开发者工具，将视图宽度调整到413px-810px区间内
• 选中第2个.nav-button元素，查看Styles面板，此时媒体查询内的规则应正常显示并生效

额外说明 #

若需要调整多个子元素的排序，只需为对应.nav-button设置不同的order值（数值越小排列越靠前，默认值为0）即可。

内容的提问来源于stack exchange，提问作者Abdul Aziz