html - 为什么访问我的两个链接时都是绿色的？

我定义了一个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>

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

最佳答案

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

.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 */ }

MyClass2

html - 为什么访问我的两个链接时都是绿色的？