如何用CSS媒体查询仅对指定元素停用全局通用的narrower类样式

解决方案 #

你原来的选择器匹配规则错误，.place > .narrower只会匹配place类元素的直接子元素中带narrower类的节点，无法命中你挂载在父级section上的narrower类，且规则范围太广会影响所有同类元素。你可以用更精准的组合选择器在小屏视图下覆盖narrower的样式即可：

方案1：CSS精准覆盖（推荐）

直接在你的媒体查询中新增针对section.places.narrower的规则，把narrower类添加的样式重置为默认值，仅会作用于同时满足「是section标签、带places类、带narrower类」的元素，不会影响其他使用narrower的节点：

@media screen and (max-width: 754px) {
  .place {
   grid-template-columns: repeat(auto-fit, minmax(320px, 100vw));
   grid-gap: 25px
  }

  /* 新增规则，精准匹配目标元素，重置narrower的效果 */
  section.places.narrower {
    /* 这里替换为你需要的属性值，抵消narrower类的原有样式即可，示例如下 */
    max-width: 100%;
    margin: 0;
    padding: 0;
    /* 若要批量重置narrower新增的所有非继承属性，可以用下行，注意会覆盖places类本身的样式，按需使用 */
    /* all: unset; */
  }
  
  /* 如果不需要隐藏任何元素，可删掉你原来写的.place > .narrower {display:none}规则 */
}

方案2：JS动态切换类（可选）

如果narrower类的样式规则较多，逐个重置太麻烦，可以用JS监听视口宽度，动态给目标元素增删narrower类：

const mq = window.matchMedia('(max-width: 754px)')
const targetSection = document.querySelector('section.places.narrower')

function toggleNarrower(e) {
  e.matches ? targetSection.classList.remove('narrower') : targetSection.classList.add('narrower')
}

mq.addEventListener('change', toggleNarrower)
toggleNarrower(mq)

内容的提问来源于stack exchange，提问作者ברק ברזילאי