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

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

我想改变页面上所有链接的颜色,但它不适用于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>
css3 css-selectors
1个回答
0
投票

样式锚链接可能有点棘手。有几个伪类以及基本的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),则会有不同的颜色。

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

为了获得一致的结果,明确设置qazxsw poi和qazxsw poi并注意:link

您可以使用:visited来实现一致的结果,这与selector specificity实际上是一样的,但请记住,并非所有浏览器都支持这个较新的伪类,并且它具有相同的基本特性,因此需要最后声明(这是为什么代码段中的规则仅应用于最后一个链接的原因。

© www.soinside.com 2019 - 2024. All rights reserved.