相同名称的类名会产生不同的结果（Chrome，Webpack 3，CSS模块）

Question

非常抱歉，我无法在CodePen中产生相同的行为。

我只有屏幕截图和代码，它们是：

第1页中的按钮

<button class="Button__big___1_wGL Button__primary-inverse____49cG Button__button___Qt92K Button__button___1bkj2" type="button">
  <span>確定</span>
</button>

第2页中的按钮

<button class="Button__big___1_wGL Button__primary-inverse____49cG Button__button___Qt92K Button__button___1bkj2" type="button">
  發送密碼重設信
</button>

类名都相同：

Button__big___1_wGL Button__primary-inverse____49cG Button__button___Qt92K Button__button___1bkj2

但这是区别

我正在使用CSS模块，Webpack 3，React和Google Chrome。

我无法重现该问题，因为我的本地开发设置非常复杂。

在CSS世界中，完全相同的订单类名称可能会产生不同的结果吗？

Answer 1

  

在CSS世界中，是否有可能完全相同的订单类名称   产生不同的结果？

类的顺序并不重要。样式表的顺序很重要。例如，您在.foo { color: green }和styles.css .foo { color: orange }

中具有相同的类main.css

<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href="main.css" rel="stylesheet" type="text/css"/>

和HTML：

<p class="foo">Footest</p>

然后，文本颜色将为橙色。 当浏览器加载并应用最后加载的样式表（<link href="main.css" rel="stylesheet" type="text/css"/>）。