Question

我目前正在使用CSS更改左侧导航中的超链接颜色，但似乎存在一些不一致。一些链接将采用我声明的正确属性，而其他链接不会接受它们。我已经为所有链接声明了相同的class nav。我知道这些链接没有任何覆盖，因为它是孤立的。

以下是左侧导航代码段

这有效：

var context='<%=request.getContextPath()%>';
<%--    var sOrg = '<%=sOrg%>'; --%>
document.write("<div id=\"leftNav\">");
document.write("<div id=\"leftNavtext\"><a href=\"home.htm?sOrg="+'<%=sOrg%>'+"\" class=\"nav\" id=\"phome\" style=\"text-decoration:none\" >Home</a></div>");

然后这不起作用：

  <% if(roles.contains("PEIMSDataCompleter")) {  %>
document.write("<div id=\"leftNavtext\" ><a href=\"dataSubmissions.jsp\" class=\"nav\" id=\"dataSubmissions\" style=\"text-decoration:none\">Data Submissions</a></div>");

然后这个有效：

document.write("<div  style=\" padding-left: 20px;padding-top:5px;\"><a href=\"scheduleMonitor.htm\" class=\"nav\" id=\"scheduleMonitor\" style=\"text-decoration:none\">Monitor Data Loads</a></div>");

这是我的CSS：

#leftNav {
width:180px;
height:687px;
background-color:#E0F0F2;
margin-bottom:15px;
padding-left:10px;
text-decoration:none;
text-color: #0083cc;
}

#leftNavtext {
font-family: Arial, Helvetica, sans-serif; font-weight:800;
font-size:95%;
color:#0083cc;
width:auto;
padding: 20px 10px 3px 0px;



}

#noteBody{
font-family: Arial, Helvetica, sans-serif; font-weight:800;
font-size:95%;
width:960px;
margin:auto;

}

// Below is the code for getting the hyperlink text to be formatted correctly (ie link colors)
a.nav:link {color: #0083cc; text-decoration: none; }
a.nav:visited {color: #0083cc; text-decoration: none; }
a.nav:hover {color: orange; text-decoration: underline; }
a.nav:active {color: #0083cc; }

据我所知，这两个链接之间没有区别。这些只是我左侧导航中的许多链接中的一小部分，这是随机发生的。我目前正在使用IE 9，这个浏览器是我的要求。

任何帮助将不胜感激！谢谢！

Answer 1

你是否形成了所有：伪指示你的锚？

a, a:link, a:visited {some.css}
a:hover, a:visited:hover, a:active, a:focus {some-other.css}

也许您正在查看特定于浏览器的样式。

Answer 2

首先，

text-color属性不存在;请改用color。
如果您正在使用ASP（似乎），请在您的问题中添加相应的标记

接下来，问题不在于您的CSS;在这里看到这个小小的JSFiddle：http://jsfiddle.net/j8ruV/2/

事实上你是使用document.write（）方法动态地向页面添加对象，但是这个方法将你的divs奇怪地添加到DOM中，因此它们不被CSS考虑（除了内联一个）。通过简单地使用.innerHTML属性进行测试，这似乎有效（请参阅小提琴）。

Answer 3

我最终不得不为链接放置内联代码：

document.write("<div id=\"leftNavtext\" ><a href=\"dataSubmissions.jsp\" class=\"nav\" id=\"dataSubmissions\" style=\"text-decoration:none; color:#0083cc;\">Data Submissions</a></div>");

CSS超链接颜色与链接，访问，悬停，活动不一致

3 个答案: