gpt4 book ai didi

html - 为什么在我使用 semantic-ui 时外部 CSS 文件不起作用?

转载 作者:太空宇宙 更新时间:2023-11-04 05:57:38 25 4
gpt4 key购买 nike

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

我想将菜单的文本颜色更改为红色。 (查看 home.html。我想更改文本“介绍”、“图片”、“支持”的颜色)我通过编写外部 css 文件来尝试这个。但它没有用。我认为类 'item' 也用于语义 ui,因此外部 css 文件中的 'item' 代码不适用,因为重叠。然后,如何同时使用 semantic-ui 标签更改文本颜色?

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

主页.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>

通用.css

.item{
color: red;

}

不使用 '!important' 的 p.s 回答将受到欢迎!

最佳答案

第一步

更改导入顺序。当您在其他样式表之后导入 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;
}

关于html - 为什么在我使用 semantic-ui 时外部 CSS 文件不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57637098/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com