CSS 样式在开发和生产中的作用不同答案

【问题标题】：CSS styles acting differently in development vs productionCSS 样式在开发和生产中的作用不同
【发布时间】：2018-12-11 07:16:22
【问题描述】：

我在将 CSS 样式应用于名为 react-popup 的包中的叠加层时遇到问题。 css 样式在生产中无法正常工作，而在开发中却可以正常工作。

基本上这两个类似乎是问题：

.mm-popup {
    display: none;
}
.mm-popup--visible {
    display: block;
}

在开发中它可以工作，但在生产中 .mm-popup--visible 总是设置为 display: none; 看起来它甚至没有考虑.mm-pop--visible，而只是使用.mm-popup.

如果我尝试这样设置

.mm-popup .mm-popup--visible {
    display: block;
}

情况正好相反，它在开发中有效，但在生产中无效。

想法？

【问题讨论】：

Do not post images of code or errors! 图片和屏幕截图可以很好地添加到帖子中，但请确保帖子在没有它们的情况下仍然清晰有用。如果您发布代码或错误消息的图像，请确保您也复制并粘贴或直接在帖子中输入实际代码/消息。
实际上，当您将相同 div 的类组合在一起时，请留下空间，现在您需要的是 .mm-popup.mm-popup--visible 没有空格。您的风格考虑的是搜索 -- 作为 mm-popup 的子项可见但它处于同一水平。所以你应该使用没有空间
@Rob 图片是显示 DOM 实际在做什么所必需的，并且看看它是如何输出 chrome 调试器的，我不认为我会说它是代码的图像？你认为什么代码在这里更有用？
你在哪里添加了css？ css 是否加载了当前更改？您可以从浏览器中检查源代码并验证该样式是否存在？
你能分享和上面一样的屏幕截图吗？显示浏览器是如何查看课程的？

标签： css reactjs

【解决方案1】：

实际上，当您将相同 div 的类组合在一起时，请留下空间，现在您需要的是 .mm-popup.mm-popup--visible 没有空格。问题是您的风格正在搜索 --visible 作为 mm-popup 的子级，但它处于同一级别.所以你应该使用没有空格

【讨论】：

【解决方案2】：

我认为mm-popup--visible 中的破折号之间有一个空格，你打错字了，好像mm-popup- -visible

【讨论】：