CSS 类在内部 CSS 类之前应用并且不影响 SemanticUI 按钮答案

【问题标题】：CSS class applied before internal CSS class and not affecting SemanticUI buttonCSS 类在内部 CSS 类之前应用并且不影响 SemanticUI 按钮
【发布时间】：2019-05-25 14:12:52
【问题描述】：

我有一个奇怪的问题

我正在尝试设置 SemanticUI 按钮的样式，但按钮的内部 CSS 应用在我的 CSS 类之上，因此没有应用任何样式。

注意最上面的样式来自semantic.min.css，而它下面的样式（被覆盖）是在我自己的样式标签中定义的

另请注意：标题中 CSS 的顺序似乎是“正确的”，或者至少，我的自定义 CSS 出现在 SemanticUI 导入之后

我将 SemanticUI React 与 CSS 模块一起使用，如果这会有所不同的话。

如何让我的类应用到语义UI 的按钮类之上？

【问题讨论】：

在<head>部分，您的自定义 css 链接应该在语义 ui css 之后。您也可以在自定义 css 上使用 !important。例如。颜色：绿色！重要；希望这行得通。
@MicSel 重要的标签有效（对我来说是新的 - 谢谢），但这不是我会选择的 - 我必须将它应用于每个声明。我在我的“头”中添加了 CSS 导入/声明顺序的屏幕截图。据我了解，这 - 应该 - 让我的本地样式优先于默认样式，但事实并非如此。
覆盖你的 CSS 的选择器是什么？
@MarkBaijens 查看编辑 - ui.button 来自 SemanticUI css，自定义类是在稍后应用在 head 部分的样式标签中定义的，但不知何故，样式以相反的顺序应用到元素

标签： css semantic-ui react-css-modules

【解决方案1】：

根据您提供的图片，您可以使用

#app .container .(your highlighted selector)

所以它会是前任

#app .container ._31HHF..{
  color: red;
}

【讨论】：

正在应用样式，它只是应用在默认 SemanticUI 样式下方，因此被默认样式覆盖
@FrozenKiwi 可能是通过更具体的选择器。什么选择器会覆盖它？

【解决方案2】：

Semantic UI 的选择器的 specificity 似乎比你的高，因为它的选择器是 .ui.button 它有两个类被选中，相比之下你的选择器只有一个类，因此，具体与语义 UI 样式表中的样式相比，尝试添加另一个类、id 或标签，使其更具体到该元素，以便您的样式正确应用。

例如，如果语义用户界面显示.ui.button { }，您可以尝试.ui.button._31HHf.... { }

[编辑]

对于带有 CSS 模块的 React，我们可以将类与以下内容组合：

import styles from './index.module.css';
import cx from 'classnames';
...

      <Button className={cx(
        styles.ui,
        styles.button,
        styles.mainButton
      )}>LEARN MORE</Button>

【讨论】：

是的，就是这样。我没有意识到无论导入顺序如何，嵌套类都具有更高的特异性。这很烦人而且有点令人困惑，但我们可以处理它
您也可以使用id，它比任何类都具有更高的特异性，尽管最好坚持使用 CSS 类
是的，我考虑过，但这将限制为每个规则的单个元素，这不会很有效