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