为何两组CSS选择器效果不等价？响应式布局差异原因咨询

核心原因：选择器优先级不匹配 #

你的代码和讲师代码的本质区别在于CSS选择器的优先级权重，这直接导致@media响应式规则无法正确覆盖原有样式：

1. 你的选择器优先级更高 #

你使用的是双类组合选择器，权重为0,0,2,0：

.left.card{ /* 两个类选择器组合，权重更高 */
  width: 45%;
  float: left;
}

.right.card{
  width: 45%;
  float: right;
}

而@media中的规则是单个类选择器，权重仅为0,0,1,0：

.card { /* 单个类选择器，权重低于双类组合 */
  width: 100%;
  display: block;
  margin-bottom: 30px;
}

由于.left.card的优先级高于.card，即使触发@media断点，原有width:45%会强制覆盖width:100%；你尝试添加的float:none如果写在.card规则里，同样因为优先级不够，无法清除原有浮动。

2. 讲师的选择器优先级匹配 #

讲师的代码把样式拆分后，所有类选择器的权重都是0,0,1,0：

.card { /* 单个类，权重0,0,1,0 */
  width: 45%;
}

.left { /* 单个类，权重0,0,1,0 */
  float: left;
}

.right { /* 单个类，权重0,0,1,0 */
  float: right;
}

当@media触发时，.card的响应式规则和原有.card规则优先级相同，媒体查询的规则会覆盖同优先级的普通规则（只要@media代码在原有代码之后），所以width:100%能正常生效。若需要清除浮动，只需在@media里给.left/.right或.card添加float:none即可（同优先级下，后写的规则覆盖先写的）。

验证方案 #

你可以在自己的@media规则里，使用和原有代码相同优先级的选择器，就能实现和讲师一致的效果：

@media (max-width: 你的断点值) {
  .left.card, .right.card {
    width: 100%;
    display: block;
    margin-bottom: 30px;
    float: none; /* 现在能正常清除浮动 */
  }
}

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