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

color不起作用,css

https://dddddgz.netlify.app/
自己看吧{:10_277:} 如果不能访问的话,
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: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的规则,这就是为什么在鼠标悬停时链接的颜色没有变成白色的原因。
页: [1]
查看完整版本: color不起作用,css