[已解决]color不起作用,css

歌者文明清理员 · 发表于 2023-5-28 23:00:03

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

如果不能访问的话，
index.html

<!DOCTYPE html>
<html>
    <head>
        <title>dddddgz 官方网站——dddddgz.netlify.app</title>
        <meta charset="utf-8">
        <meta name="keywords" content="dddddgz,官网,首页">
        <meta name="description" content="dddddgz官网首页">
        <meta name="author" content="歌者文明清理员">
        <link rel="stylesheet" type="text/css" href="a.css">
    </head>
    <body>
        <h1>dddddgz 官方网站</h1>
        <p>在 <a href="https://dddddgz.netlify.app">dddddgz.netlify.app</a> 上关注我们！</p>
        <h2>以下是 dddddgz 目前的所有服务：</h2>
        
    </body>
</html>

a.css

a:link {
    color: blue;
}
a:hover {
    color: white;
    background-color: black;
}
a:active {
    color: white;
    background-color: gray;
}
a:visited {
    color: blue;
}

最佳答案

月排行榜 / 总排行榜

isdkz

2023-5-28 23:28:58

歌者文明清理员发表于 2023-5-28 23:23
对对对

这个问题可能是由于CSS伪类选择器的顺序引起的。你的代码中a标签的CSS伪类选择器顺序是： :link -> :hover -> :active -> :visited ，但是在实际使用中，我们需要遵循一个特定的顺序，即“LoVe/HAte”，也就是 :link -> :visited -> :hover -> :active 。

因此，你的CSS代码应当如下所示：

a:link { color: blue; } a:visited { color: blue; } a:hover { color: white; background-color: black; } a:active { color: white; background-color: gray; }

这种顺序很重要，因为一旦一个规则匹配了，其他的就不再被考虑了。例如，如果一个链接同时满足 :hover 和 :visited 的状态，那么如果 :visited 的规则在 :hover 之后，那么 :visited 的样式规则将会覆盖 :hover 的样式规则。在你的代码中，如果链接已经被访问过了， :visited 的规则就会覆盖 :hover 的规则，这就是为什么在鼠标悬停时链接的颜色没有变成白色的原因。

跳转到最佳答案楼层

isdkz · 发表于 2023-5-28 23:01:56

你的 CSS 代码看起来是没有问题的，但有几个可能导致颜色不起作用的原因：

1. 缓存问题：浏览器可能在加载 CSS 文件时缓存了旧版本。尝试清理浏览器缓存，或者在浏览器地址栏输入  Ctrl + F5  强制刷新页面。

2. 文件路径问题：确保  a.css  文件的路径在  index.html  文件中的链接是正确的。如果  a.css  文件和  index.html  文件不在同一个目录下，你可能需要修改  <link rel="stylesheet" type="text/css" href="a.css">  中的  href  路径。

3. 覆盖问题：可能有其他 CSS 规则覆盖了你的链接颜色规则。例如，如果在其他地方设置了  a { color: red; } ，这可能会覆盖你在  a.css  文件中的规则。检查其他 CSS 文件或者  index.html  文件中的内联样式，看看是否有可能覆盖你的样式。

4. CSS 特异性：在 CSS 中，更特定的选择器将优先于较少特定的选择器。例如， body a:link { color: red; }  将优先于  a:link { color: blue; } 。检查你的 CSS，看看是否有可能有更具特异性的选择器覆盖了你的规则。

希望这些建议能帮到你！

歌者文明清理员 · 发表于 2023-5-28 23:04:43

isdkz 发表于 2023-5-28 23:01
你的 CSS 代码看起来是没有问题的，但有几个可能导致颜色不起作用的原因：

1. 缓存问题：浏览器可能在加 ...

都没有，而且覆盖也不可能存在，因为我目前遇到的问题是背景色正常，文字颜色就是变不了

isdkz · 发表于 2023-5-28 23:21:52

歌者文明清理员发表于 2023-5-28 23:04
都没有，而且覆盖也不可能存在，因为我目前遇到的问题是背景色正常，文字颜色就是变不了

你是想要鼠标悬停的时候链接的文字变成白色然后没有生效？

歌者文明清理员 · 发表于 2023-5-28 23:23:14

isdkz 发表于 2023-5-28 23:21
你是想要鼠标悬停的时候链接的文字变成白色然后没有生效？

对对对

isdkz · 发表于 2023-5-28 23:28:58

歌者文明清理员发表于 2023-5-28 23:23
对对对

这个问题可能是由于CSS伪类选择器的顺序引起的。你的代码中a标签的CSS伪类选择器顺序是： :link -> :hover -> :active -> :visited ，但是在实际使用中，我们需要遵循一个特定的顺序，即“LoVe/HAte”，也就是 :link -> :visited -> :hover -> :active 。

因此，你的CSS代码应当如下所示：

a:link { color: blue; } a:visited { color: blue; } a:hover { color: white; background-color: black; } a:active { color: white; background-color: gray; }

这种顺序很重要，因为一旦一个规则匹配了，其他的就不再被考虑了。例如，如果一个链接同时满足 :hover 和 :visited 的状态，那么如果 :visited 的规则在 :hover 之后，那么 :visited 的样式规则将会覆盖 :hover 的样式规则。在你的代码中，如果链接已经被访问过了， :visited 的规则就会覆盖 :hover 的规则，这就是为什么在鼠标悬停时链接的颜色没有变成白色的原因。

账号		自动登录	找回密码
密码			立即注册