如何排除.fixedsize及其子元素不受CSS全局*选择器样式影响？

嘿，我懂你的困扰——你想给.inner下的所有子元素统一设置max-width:100%，但要彻底排除.fixedsize类元素以及它的所有后代，对吧？你之前的写法没生效，核心问题出在选择器的逻辑上：

你的原代码：

.inner *:not(.fixedsize){ max-width:100% } 
.fixedsize > *{ max-width:none }

这里的:not(.fixedsize)只会排除直接带有.fixedsize类的元素，但.fixedsize的子元素（比如你的#childOfMap）本身没有这个类，所以还是会被.inner *命中并应用max-width:100%；而.fixedsize > *只能覆盖.fixedsize的直接子元素，更深层的后代元素还是会受初始样式影响，自然达不到你要的“完全排除”效果。

推荐方案（兼容性拉满） #

用“先统一设置，再针对性重置”的思路，直接覆盖.fixedsize及其所有后代的样式：

/* 给.inner下所有元素应用基础样式 */
.inner * {
  max-width: 100%;
}

/* 排除.fixedsize及其所有子元素，重置样式 */
.inner .fixedsize,
.inner .fixedsize * {
  max-width: none;
}

这个写法逻辑清晰，兼容性好，不管.fixedsize嵌套多少层，它和所有后代元素都会被重置为max-width:none，不会再受基础样式影响。

进阶方案（CSS Selectors Level 4，现代浏览器可用） #

如果你不需要兼容旧版浏览器（比如IE），可以用:has()选择器更精准地排除：

.inner *:not(.fixedsize):not(:has(.fixedsize)) {
  max-width: 100%;
}

这个选择器直接命中.inner下既不是.fixedsize本身，也不包含.fixedsize的所有元素，一步到位完成样式设置，不需要额外的重置规则。

针对你的HTML结构测试，两种方案都能让#map和#childOfMap不受max-width:100%的影响，其他.inner下的元素正常应用样式。

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