gpt4 book ai didi

css - 'a:link {color}' CSS 选择器的问题

转载 作者:行者123 更新时间:2023-11-28 00:22:52 25 4
gpt4 key购买 nike

我想更改页面上所有链接的颜色,但它在 chrome 上不起作用,在 opera 上工作正常。我不明白这是怎么回事,你能帮我让它在每个浏览器上工作吗??

a:link
{
color: rgb(255, 169, 73);
text-decoration: none;
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Lake Towada</title>
<link rel="stylesheet" href="CSS/style.css">
</head>

<body>
<p>
some text<a href="https://www.japan-guide.com/e/e3775.html" target="-_blank">Oirase</a>
some text<a href="https://www.japan-guide.com/e/e3780.html" target="-_blank">the mountains</a>some more text
</p>
</body>

最佳答案

样式化 anchor 链接可能有点棘手。有几个伪类以及基本的 a 标记选择器,可用于根据链接的状态影响链接的样式。

/* newly added in the CSS selectors Level 4 specification */
:any-link, p :any-link{
color:black;
}

/* it is recommended to always have the pseudo classes it in this order */
:link{
color:blue;
}
:visited{
color:mediumvioletred;
}
:hover{
color:mediumaquamarine;
}
:active{
color:green;
}

/* lowest specificity, so it will not be applied */
a{
color:green;
}
<div><a href="#">This link starts out blue.</a></div>
<div><a href="https://www.google.com/">This link *might* be violetred in your browser.</a></div>
<div><a href="https://www.facebook.com/">So might this.</a></div>
<div class="special"><a href="#">Hovering will turn the links aquamarine.</a></div>
<p><a href="#">This link is black in browsers that support the new pseudo class. It also won't have any hover effects.</a></p>

如果您曾经在 Chrome 浏览器(但不是 Opera)上访问过代码片段中的其中一个链接,它会有不同的颜色。

我提供的代码片段中的一两个链接很可能已经为您显示了不同的颜色,因为您过去曾访问过其中一个网站。

要获得一致的结果,请明确设置 :link:visited 并注意 selector specificity .

您可以使用 :any-link 来获得一致的结果,这实际上与 :link,:visited 相同,但请记住并非所有浏览器都支持此功能较新的伪类,并且它具有相同的基础特异性,因此需要将其声明为last(这就是代码片段中的规则仅应用于最后一个链接的原因)。

关于css - 'a:link {color}' CSS 选择器的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54798848/

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