Question

我在Repl中构建了这个html和css文件，如下所示：

的index.html：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>Anchor pseudoclasses drill</title>
        <link href="index.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <main role="main">
        <p>Choose an animal below to search for it on Google. Remember: you can navigate through this list with <kbd>Tab</kbd> and <kbd>Shift</kbd> + <kbd>Tab</kbd>.</p>
        <ul>
          <li><a href="#">Cats</a></li>
          <li><a href="#">Dogs</a></li>
          <li><a href="#">Pigs</a></li>
        </ul>
      </main>
    </body>
</html>

index.css：

main {


padding: 30px;
}

a {
  text-decoration: none;
}

a:link {
  color: green;
}

a:visited {
  color: red;
}

a:focus, a:hover {
  font-size: 20px;
}

a:active {
  color:black;
}

/* key-like styles used by 
https://meta.stackexchange.com */
kbd {
  display: inline-block;
  margin: 0 .1em;
  padding: .1em .6em;
  font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
  font-size: 11px;
  line-height: 1.4;
  color: #242729;
  text-shadow: 0 1px 0 #FFF;
  background-color: #e1e3e5;
  border: 1px solid #adb3b9;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(12,13,14,0.2), 0 0 0 2px #FFF inset;
  white-space: nowrap;
}

当我点击其中一个链接时，而不是那个链接变为红色，所有链接都变为红色，我不清楚当我访问过的链接时，访问的所有链接都应用了。

Answer 1

因为href是相同的。

main {
  padding: 30px;
}

a {
  text-decoration: none;
}

a:link {
  color: green;
}

a:focus, a:hover {
  font-size: 20px;
}

a:active {
  color: black;
}
a:visited {
  color: red;
}


/* key-like styles used by 
https://meta.stackexchange.com */
kbd {
  display: inline-block;
  margin: 0 .1em;
  padding: .1em .6em;
  font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
  font-size: 11px;
  line-height: 1.4;
  color: #242729;
  text-shadow: 0 1px 0 #FFF;
  background-color: #e1e3e5;
  border: 1px solid #adb3b9;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(12,13,14,0.2), 0 0 0 2px #FFF inset;
  white-space: nowrap;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>Anchor pseudoclasses drill</title>
        <link href="index.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <main role="main">
        <p>Choose an animal below to search for it on Google. Remember: you can navigate through this list with <kbd>Tab</kbd> and <kbd>Shift</kbd> + <kbd>Tab</kbd>.</p>
        <ul>
          <li><a href="#Cats">Cats</a></li>
          <li><a href="#Dogs">Dogs</a></li>
          <li><a href="#Pigs">Pigs</a></li>
        </ul>
      </main>
    </body>
</html>

当我只点击一个链接时，为什么我将所有链接显示为已访问？

1 个答案: