Javascript 修改范围内的链接时出现问题

我目前正在学习javascript/CSS，因此我正在尝试实现在以下位置找到的动态javascript面包屑：。代码如下

我想做的是修改面包屑生成的链接；我想他们是一个绿色的阴影，没有文字装饰时，他们不活跃或被悬停。当它们处于活动状态或悬停状态时，我希望它们变为红色并加下划线

面包屑的生成是正确的，但是CSS似乎没有被正确应用。无论什么链接都会加下划线，开始时为蓝色，访问后为紫色。这很奇怪，因为如果我修改应用的链接的大小、重量、字体系列等，而不是颜色或文本装饰。我可能在某个地方犯了初学者的错误，所以提前感谢您的时间和帮助

我的CSS是：

.crumb{
  FONT-WEIGHT: medium;
  FONT-SIZE:medium;
  FONT-STYLE:italic;
  FONT-FAMILY:Arial;
}
.crumb:link, .crumb:visited{
  color: green;
  text-decoration: none;
}
.crumb:hover, .crumb:active: {
  color:red;
  text-decoration: underline;
}

面包屑的代码为：

var crumbsep = " > ";
var precrumb = "<span class=\"crumb\">";
var postcrumb = "</span>";
var sectionsep = "/";
var rootpath = "/"; // Use "/" for root of domain.
var rootname = "Home";

var ucfirst = 1; // if set to 1, makes "directory" default to "Directory"

var objurl = new Object;
objurl['main-default'] = 'Site Home';

// Grab the page's url and break it up into directory pieces
var pageurl = (new String(document.location));
var protocol = pageurl.substring(0, pageurl.indexOf("//") + 2);
pageurl = pageurl.replace(protocol, ""); // remove protocol from pageurl
var rooturl = pageurl.substring(0, pageurl.indexOf(rootpath) + rootpath.length);
if (rooturl.charAt(rooturl.length - 1) == "/") //remove trailing slash
{
  rooturl = rooturl.substring(0, rooturl.length - 1);
}
pageurl = pageurl.replace(rooturl, ""); // remove rooturl fro pageurl
if (pageurl.charAt(0) == '/') // remove beginning slash
{
  pageurl = pageurl.substring(1, pageurl.length);
}

var page_ar = pageurl.split(sectionsep);
var currenturl = protocol + rooturl;
var allbread = precrumb + "<a href=\"" + currenturl + "\">" + rootname + "</a>" +    
postcrumb; // start with root

for (i=0; i < page_ar.length-1; i++)
{
  var displayname = "";
  currenturl += "/" + page_ar[i];
  if (objurl[page_ar[i]])
  {
    displayname = objurl[page_ar[i]];
  }
  else
  {
    if (ucfirst == 1)
    {
      displayname = page_ar[i].charAt(0).toUpperCase() + page_ar[i].substring(1);
    }
    else
    {
      displayname = page_ar[i];
    }
   }
  allbread += crumbsep + precrumb + "<a href=\"" + currenturl + "\">" + displayname + 
    "</a>" + postcrumb;
}
document.write(allbread);

---

如果将css更改为：

.crumb a:link, .crumb a:visited{
  color: green;
  text-decoration: none;
}
.crumb a:hover, .crumb a:active {
  color:red;
  text-decoration: underline;
}

那么伪类格式应用于链接而不是跨度

---

活动后也要加冒号。

可能不是javascript问题。首先获得正确的标记，然后生成它。document.write的HTML结果类似于：

<span class="crumb"><a href="...">linkText</a></span>

.crumb a {
  font-weight: medium;
  font-size: medium;
  font-style: italic;
  font-family: arial;
}

.crumb a:link, .crumb a:visited {
  color: green;
  text-decoration: none;
}

.crumb a:hover, .crumb a:active {
  color:red;
  text-decoration: underline;
}

之后有一个额外的冒号。碎屑a：主动阻止它应用。现在工作

---

顺便提一下，为什么要在客户端使用document.write执行此操作，而在服务器上执行此操作并只发送HTML可能要简单得多？

您的CSS样式指的是跨距，而不是链接。将“.crump”改为“.crump a”，到处都可以，它应该可以很好地工作

---

祝你好运

正是您编写Javascript的方式：

在代码顶部组合变量 使用浏览器检查器运行代码 var objurl=新对象已弃用，应使用文字语法 document.location返回一个对象，而不是字符串 你可以利用它来学习更多的东西 不要使用document.write，最好将代码分配给现有元素 关于您的代码，应该将其重新写入以下内容：

<span class="crumb"><a href="...">linkText</a></span>

.crumb a {
  font-weight: medium;
  font-size: medium;
  font-style: italic;
  font-family: arial;
}

.crumb a:link, .crumb a:visited {
  color: green;
  text-decoration: none;
}

.crumb a:hover, .crumb a:active {
  color:red;
  text-decoration: underline;
}

---

谢谢你指出多余的冒号。那+加上a:效果很好。另外，我不确定您所说的客户机/服务器是什么意思。我想这可能有点让我不知所措，因为我还是从这个开始。您能再解释一下吗？如果您使用的是document.write，那么您是在页面加载时执行此操作的，这样服务器就可以在HTML中编写面包屑，而您不需要在无脚本的情况下执行此操作。脚本越少越好：-谢谢你提供了如此翔实的答案。该代码看起来很棒，比原始代码干净多了！如果答案在某种程度上是上帝保佑你，你随时可以投赞成票，这是我们做事情的正常方式。你在正确答案上打上记号，让它完全回答你的问题，并投票给其他对你有帮助的人，对你自己的问题或你所寻求的答案的答案。。。