如果放置在外部样式表（包括引导程序）中，超链接 CSS 不起作用，但放置在同一页面内时可以正常工作

问题描述 投票：0回答：1

超链接的 css 样式

color: black;
放置在外部样式表中时不起作用。

示例1（css也写在html页面内）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
    <a href="#"> For Question </a>
</body>
<style>
a {
    color: black;
    text-decoration: none;
}
a:hover {
    color: green;
    transition: 1s;
}
</style>
</html>

这工作得很好，没有任何问题。但是

示例 2（在外部文件中编写的 CSS 并包含在 html 中的链接标记中

示例_2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="./Example_2.css">
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
    <a href="#"> For Question </a>
</body>
<style>

</style>
</html>

示例_2.css

a {
    color: black;
    text-decoration: none;
}
a:hover {
    color: green;
    transition: 1s;
}

附加控制台中显示的信息。

我需要解决这个问题，为超链接提供默认颜色，而不需要 css 中的 

!important
属性。因为如果我使用 !important 它将影响页面内的所有超链接。那么我将无法再在同一页面内自定义具有特殊颜色的Hperlinks。

例如：

<a href="#" class="default"> Text Here 1 </a>
我需要这个具有默认样式的超链接和
<a href="#" class="special"> Text Here 2 </a>
这个具有特殊样式的超链接。

同时为所有默认的超链接提供类名将使代码更加复杂。

任何人都可以找出问题并帮助我吗？

html css bootstrap-4
1个回答
0
投票

这可能是由于第二个示例中加载 CSS 文件的顺序造成的。 Bootstrap CSS 在您的自定义样式表之后加载，并且可以覆盖其内容。尝试在 Bootstrap 样式表之后加载自定义样式表，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="./Example_2.css">
</head>
<body>
    <a href="#"> For Question </a>
</body>
<style>

</style>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.