为何媒体查询中需同时用.product和.image-reverse修改flex-direction？

核心问题出在CSS选择器的优先级以及规则声明顺序上：

• 选择器优先级权重：单个类选择器（比如.product或.image-reverse）的优先级权重完全相同（均为10）。当两个优先级相同的选择器对同一元素的同一个CSS属性进行设置时，后声明的规则会覆盖先声明的规则。
• 媒体查询内的规则冲突：你在@media(max-width:600px)的媒体查询中，应该存在一个针对.product类的flex-direction规则，且这个规则的声明顺序在单独的.image-reverse规则之后。此时，.product的规则会覆盖.image-reverse的设置——因为两者优先级相同，后出现的规则生效。
• 组合选择器的优先级优势：当使用.product.image-reverse这种组合类选择器时，它的优先级是两个类权重的叠加（变为20），比单个类选择器的优先级更高。所以无论.product的规则在什么位置，这个组合选择器的规则都能生效，直接覆盖低优先级的设置。

举个具体的冲突场景示例：

@media(max-width:600px) {
  /* 先声明的.image-reverse规则 */
  .image-reverse {
    flex-direction: column;
  }
  /* 后声明的.product规则，优先级相同，会覆盖上面的设置 */
  .product {
    flex-direction: row;
  }
}

这种情况下单独的.image-reverse设置就会失效。而改用组合选择器后，高优先级规则就能生效：

@media(max-width:600px) {
  /* 高优先级的组合选择器规则 */
  .product.image-reverse {
    flex-direction: column;
  }
  .product {
    flex-direction: row;
  }
}

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