为什么当我使用 semantic-ui 时外部 CSS 文件不起作用？

Question

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

我想将菜单的文本颜色更改为红色。（看 home.html。我想改变文本 'intro'、'picture'、'support' 的颜色）我通过写入外部 css 文件来尝试这个。但它没有用。我认为 class 'item' 也用于 semantic-ui，因此外部 css 文件中的 'item' 代码不适用，因为重叠。然后，如何同时使用 semantic-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;

}

p.s 欢迎不使用 '!important' 的回答！

Answer 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" >

第 2 步

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

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

为什么当我使用 semantic-ui 时外部 CSS 文件不起作用？

Why external CSS file doesn't work when I use semantic-ui?

html

css

semantic-ui

步骤 1

第 2 步