为何需同时使用.container与contact__container类修改CSS样式？

核心原因是CSS选择器的特异性优先级，下面一步步拆解：

1. 先搞懂选择器特异性的基础规则 #

CSS里每个选择器都有对应的权重值，核心规则：

• 单个类选择器（比如.container、.contact__container）的权重都是 0,0,1,0
• 当两个选择器针对同一个元素设置相同属性时：
  • 权重不同，权重高的生效
  • 权重相同，样式文件里后声明的选择器样式会覆盖前面的

2. 回到你的场景分析 #

你的主样式文件里：

.container {
  width: var(--container-width-lg);
  margin: 0 auto;
}

Contact组件的容器同时拥有container和contact__container两个类。

情况1：单独用.contact__container #

如果这么写：

.contact__container {
  width: 50%;
  /* 网格布局样式 */
}

它和.container的权重完全一致。这时候如果.container的样式在CSS文件里排在.contact__container之后，那.container的width: var(--container-width-lg)就会覆盖你设置的50%，导致自定义样式失效。

情况2：用.container.contact__container组合选择器 #

这个选择器是两个类选择器的叠加，权重升级为 0,0,2,0，比单个类的权重更高。不管.container的样式写在前面还是后面，这个组合选择器里的width: 50%都会优先生效，稳稳覆盖.container的默认宽度设置。

3. 教程这么做的目的 #

就是为了样式稳定性：避免因为CSS文件的加载顺序、后续样式调整（比如把.container的代码移到后面）等情况，导致Contact组件的容器宽度不符合预期。用更高特异性的选择器，能确保你的自定义样式不会被基础样式意外覆盖。

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