如何选中特定row类元素修改display属性实现子元素横向排列

• 你编写的代码不生效的核心原因是伪类选择器写法不符合CSS规范，:second-child并不是CSS支持的合法选择器，匹配父元素下第N个同级子元素的正确伪类是:nth-child(N)。
• 额外注意：:nth-child()的匹配逻辑是先统计父元素下所有同级子元素的排序，再取对应位置的元素，不会只筛选类为row的元素排序。如果你的section下第二个子元素不是row类，该选择器仍然匹配不到目标元素。更稳妥的方案是给你要选中的这个特定row元素单独加一个自定义类，避免页面结构调整后选择器失效。

方案1（最稳妥，推荐）：给目标row加自定义类 #

给你需要设置flex的row元素额外加一个自定义类，比如row--flex，对应CSS如下：

.row {
  max-width: 1140px;
  margin: 0 auto;
}
/* 选中带自定义类的row */
.row.row--flex {
  display: flex;
  /* 可选：添加gap属性调整子元素间距 */
  gap: 16px;
}
.row.row--flex .works-step {
  /* 父元素设置flex后，子元素默认就会横向排列，inline-block可根据实际样式需求决定是否保留 */
  display: inline-block;
}

方案2：不修改HTML结构，修正伪类写法 #

如果你不想修改HTML加自定义类，可以把选择器修正为如下写法（仅当section下第二个子元素确实是row类时生效）：

section .row:nth-child(2) {
  display: flex;
}
section .row:nth-child(2) .works-step {
  display: inline-block;
}

如果修改后样式仍然不生效，可以打开浏览器开发者工具，选中目标row元素查看样式面板，确认是否有其他更高优先级的CSS规则覆盖了你写的display: flex属性，可通过提高选择器优先级解决冲突。

内容的提问来源于stack exchange，提问作者Mohamed Ahmed