CSS全局选择器*替换为类选择器.bar后失效，求解决方法

你遇到的问题核心在于选择器的作用范围理解偏差：

原代码的*, *:before, *:after是选中页面上所有元素（包括每一个HTML标签、以及它们的:before/:after伪元素），而你改写的.bar, .bar:before, .bar:after只选中了带.bar类的元素本身，以及它自身的伪元素——但模块内部的子元素（比如嵌套的div、span、按钮等）完全没被这个选择器覆盖，自然不会应用box-sizing: border-box，导致样式失效。

正确的写法 #

要实现和原全局选择器等效的局部效果，你需要选中.bar元素本身、它下面的所有子元素，以及这些元素的伪元素：

.bar,
.bar *,
.bar *:before,
.bar *:after {
  box-sizing: border-box;
}

更简洁的替代方案 #

因为box-sizing可以通过inherit继承，你也可以用更精简的写法达到同样效果：

.bar {
  box-sizing: border-box;
}
.bar * {
  box-sizing: inherit;
}

这种写法让.bar本身应用border-box，然后它下面的所有子元素都继承这个值，伪元素也会默认继承父元素的box-sizing，代码更简洁且效果一致。

为什么原写法无效？ #

举个简单例子：假设你的.bar模块里有这样的结构：

<div class="bar">
  <div class="inner">
    <p>文本内容</p>
  </div>
</div>

你的原改写代码只会给.bar和.bar:before/.bar:after设置样式，但.inner、<p>这些子元素还是使用默认的box-sizing: content-box，这就会导致模块内的布局和原全局样式下的表现不一致。

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