大屏@media中如何设置.product-four宽度为100%父容器或与.product-one一致？

需求：在大屏（min-width:800px）的媒体查询中，让.product-four的宽度与同一规则中的.product-one保持一致，或者直接设为父容器的100%。尝试使用:not()伪类实现，但未生效。

用户提供的CSS代码：

* {
  box-sizing: border-box;
  margin: 0;
}

.parent {
  display: flex;
  flex-wrap: wrap;
}

.parent > div {
  background-color: rgb(177, 168, 168);
  width: 100%;
  margin: 5px;
  padding: 5px;
  text-align: center;
}

/* Med Screens */
@media (min-width: 400px) {
  .parent > div:not(.product-one) {
    width: calc((100% / 3) - 10px);
  }
  h3 {
    color: red;
  }
}

/* Large Screens */
@media (min-width: 800px) {
  .parent > div:not(.product-one, .product-four) {
    width: calc((100% / 2) - 10px);
  }
  h3 {
    color: rgb(22, 114, 22);
  }
}

解决方案 #

问题出在:not()伪类的多选择器语法兼容性上，部分旧浏览器不支持在:not()中使用逗号分隔多个选择器，会导致整个选择器失效，进而让.product-four也被错误应用了宽度规则。可以通过以下两种方式解决：

方式1：拆分:not()选择器（兼容旧浏览器） #

将大屏媒体查询中的:not(.product-one, .product-four)拆分为:not(.product-one):not(.product-four)，确保所有浏览器都能正确识别：

/* Large Screens */
@media (min-width: 800px) {
  .parent > div:not(.product-one):not(.product-four) {
    width: calc((100% / 2) - 10px);
  }
  h3 {
    color: rgb(22, 114, 22);
  }
}

修改后，.product-one和.product-four都会继承基础样式中的width:100%，满足需求。

方式2：直接显式指定.product-four的宽度（优先级更高） #

如果需要更明确的控制，可以直接在大屏媒体查询中单独设置.product-four的宽度，确保优先级覆盖其他规则：

/* Large Screens */
@media (min-width: 800px) {
  .parent > div:not(.product-one, .product-four) {
    width: calc((100% / 2) - 10px);
  }
  /* 显式设置.product-four宽度为100%，与.product-one一致 */
  .parent > .product-four {
    width: 100%;
  }
  h3 {
    color: rgb(22, 114, 22);
  }
}

这种写法更直观，也无需担心兼容性问题。

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