Question

我定义了一个css文件my_style.css并在我的页面中使用它。

body {
  background-color: linen;
}
.myClass1 a:link,
a:visited {
  color: orange;
  margin-left: 40px;
}
.myClass2 a:link,
a:visited {
  color: green;
  margin-left: 40px;
}

<html>

<head>
  <link href="my_style.css" rel="stylesheet" type="text/css" />
</head>

<body>

  <a class="myClass1" href="http://www.youtube.com">Link1</a>
  <a class="myClass2" href="http://www.youtube.com">Link2</a>

</body>

</html>

为什么两个链接都是绿色的？

Answer 1

这两个链接都是绿色的，因为：

.myClass2 a:link,a:visited { /* foo */ }

读作：

.myClass2 a:link { /* foo */ }
a:visited { /* foo */ }

而不是：

.myClass2 a:link { /* foo */ }
.myClass2 a:visited { /* foo */ }

您需要将完整选择器放在组的每个部分中。

.myClass2 a:link,
.myClass2 a:visited { /* foo */ }

此外，由于链接本身是类的成员，因此您不希望使用后代组合子。

a.myClass2:link,
a.myClass2:visited { /* foo */ }

Answer 2

您忘记了a:visited选择器

之前的类选择器

 a.myClass1:link,  a.myClass1:visited{
    color: orange;
    margin-left: 40px;
}

 a.myClass2:link,  a.myClass2:visited{
    color: green;
    margin-left: 40px;
}

Answer 3

您正在向a:visited施加两次窗台。第一次设置color: orange时，第二次color: green。

显然这两个链接都已visited，因为两者都是相同的。

CSS代表“级联样式表”，这实际上意味着最后的属性覆盖了第一个属性。

您的疑惑可能与,（逗号）的工作方式有关。这意味着样式将应用于两个选择器（逗号之前和之后）。

此外，在您的CSS上，这些类将应用于a标记的父级，而不是a标记本身。这是解决方案的方法（因为我不知道你想要实现的目标：

/* this will apply to all <a> tags with class myClass1 */
a.myClass1 {
    color: orange;
}

/* this will apply to all <a> tags with class myClass2 AND to all visited a tags even if they are of class myClass1  */
a.myClass2,
a:visited {
    color: green;
}

/* This is so you don't write the same twice (DRY principle) */
a.myClass1,
a.myClass2 {
    margin-left: 40px;
}

基本上在您发布的HTML上，两个链接都是绿色的。如果您将其中一个更改为您未访问过的页面，则它将为橙色。

Answer 4

您当前的css：

.myClass1 a:link,
a:visited {
  color: orange;
  margin-left: 40px;
}
.myClass2 a:link,
a:visited {
  color: green;
  margin-left: 40px;
}

如下所示：

用于myClass1后代a未找到锚点标记link，以及a锚点标记visited生成文字颜色orange并使其左边距40px。

然后是myClass2后代a未找到的锚标记，以及a已visited的锚标记，使文本颜色为绿色并使其左边距40 px;

正如其他人之前所说的那样，, a:visited css正在将所有锚标记更改为绿色，因为css将其样式自上而下应用，绿色是元素类型的最后一个引用。

你必须引用完整选择器。话虽如此，之前的答案包括后代选择器（这将不起作用），因为锚元素与类元素相同。因此，这就是你正在寻找的东西

＆＃13;

body 
{
    background-color: linen;
}

a.myClass1:link, a.myClass1:visited{
    color: orange;
    margin-left: 40px;
}

a.myClass2:link, a.myClass2:visited{
    color: green;
    margin-left: 40px;
}

＆＃13;

<a class = "myClass1" href = "http://www.youtube.com">Link1</a>
<a class = "myClass2" href = "http://www.youtube.com">Link2</a>

＆＃13;

不留a和.Class1之间的空格，css表示它们是相同的元素（相对于它们之间的空格表示后代）

希望这会有所帮助

访问时为什么我的链接都是绿色的？

4 个答案: