为什么当我使用语义 UI 时外部 CSS 文件不起作用？答案

【问题标题】：Why external CSS file doesn't work when I use semantic-ui?为什么当我使用语义 UI 时外部 CSS 文件不起作用？
【发布时间】：2019-08-24 18:49:39
【问题描述】：

我想使用外部 CSS 文件，但它不起作用。

我想将菜单的文本颜色更改为红色。（查看 home.html。我想更改文本 'intro'、'picture'、'support' 的颜色）我通过编写外部css文件尝试了这一点。但它没有用。我认为类 'item' 也用于语义 UI，因此外部 css 文件中的 'item' 代码由于重叠而不适用。然后，如何同时使用语义ui标签来更改文本颜色？

下面是我的home.html文件和common.css文件。

home.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>title1111</title>
    <link rel="stylesheet" href="../css/common.css" type="text/css" >
    <link rel="stylesheet" href="../css/home.css" type="text/css" >
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.css">


</head>


<body>


    <div class="ui secondary  menu">
        <a class="item">intro</a>
        <a class="item">picture</a>
        <a class="item">support</a>
        </div>
    </div>

    <div id="body">


    </div>
    <div id="footer">

    </div>




    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
</body>

common.css

.item{
    color: red;

}

欢迎回答不使用'！important'！

【问题讨论】：

标签： html css semantic-ui

【解决方案1】：

步骤 1

更改导入的顺序。当您在其他样式表之后导入 Semantic-Ui 样式表时，它会覆盖您的规则。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.css">
<link rel="stylesheet" href="../css/home.css" type="text/css" >
<link rel="stylesheet" href="../css/common.css" type="text/css" >

第二步

在您的规则中更具体，包括层次结构。

.ui.menu .item {
    color: red;
}

【讨论】：