【问题标题】：Different link color on different html pages using the same css doc使用相同 css doc 的不同 html 页面上的不同链接颜色
【发布时间】：2013-03-15 17:09:31
【问题描述】：

我对编程还很陌生，所以我很抱歉这是一个相对简单的问题。

我正在寻找一种有效的方法来使每个 html 页面的 <a> 标记内的链接颜色不同（即一个页面将具有绿色链接，而另一个将具有蓝色链接）而无需添加 class="green"或class="blue" 到每个<a> 标签。

我知道我可以为每个页面创建单独的 css 文档，但我希望将整个网站保留在一个 css 页面上，因此当我想要进行总体更改时不必单独更新每个样式表.

有没有办法在<a> 标签中定义与更高标签的类相关的样式规则？例如，是否可以说

<body>
<div class="page1content">
<p>text here 
<a href="someurl.com"> link here </a> 
more text 
<a href="secondurl.com"> second link</p> 
</div>

<div class="footer">
<p>even more text
<a href="thirdurl.com"></a></p>
</div>
</body>

然后定义与<div class="page1content">相关的前两个<a>标签（不影响第三个<a>标签）？然后我会用<div class="page2">、<div class="page3">等替换每个页面。

我唯一能想到的另一件事是尝试使用我不太熟悉的 JavaScript。我尝试插入

<script type="text/javascript">
var myObj = document.getElementsByTagName("a");
myObj.style.color="green";
</script>

进入给定页面，希望它能使该页面上所有<a> 标记中的文本颜色变为绿色，但它似乎不起作用。

作为比较，我还通过将“a”更改为“p”来测试我的 JavaScript，如下所示：

<script type="text/javascript">
var myObj = document.getElementsByTagName("p");
myObj.style.color="green";
</script>

希望这会使我所有的<p> 文本变为绿色，但这也不起作用，所以很明显我错误地编码了 JavaScript，对于初学者。

任何关于如何一次更改给定页面上的多个<a> 标签（不将类放在标签内）的想法将不胜感激。

谢谢！

【问题讨论】：

标签： javascript html css hyperlink styles

【解决方案1】：

LIVE DEMO

为您的 BODY 元素添加一个 ID，例如：

<body id="page1">

JavaScript：

var colorStyles = {
  "page1":"fuchsia",
  "page2":"green",
  "page3":"orange"
};

// DETECT body ID (AKA pageName)
var pageName = document.getElementsByTagName("body")[0].id;

// COLLECT YOUR ANCHOR ELEMENTS
var A_obj = document.getElementsByTagName("a");

// LOOP ANCHOR ELEMENTS TO ADD .style.color
for(var i=0; i<A_obj.length; i++) {
    A_obj[i].style.color = colorStyles[ pageName ];
}

如果您由于模板结构而无法为您的body添加 ID，那么只需在您的页面中添加一个虚拟元素，例如：

<div id="page" name="page1" style="display:none;"></div>

只更改这条 JS 行：

var pageName = document.getElementById("page").getAttribute('name');

LIVE DEMO

【讨论】：

谢谢。这更有意义，尽管事实证明它在没有 JavaScript 的情况下也是可行的。非常感谢您的帮助。

【解决方案2】：

给每个 body 元素一个 ID，然后在你的 CSS 中选择后代锚标记元素：

body#myBody1 a {color: red;}

body#myBody2 a {color: blue;}

【讨论】：

在更复杂的 CSS 样式页面结构中，这将失败 IINW
谢谢！我正在自己学习 html/css，但我不明白您必须将元素放在 id/class 选择器之后才能从更高的元素引用 id/class。它现在有意义（并且有效）！感谢@rishikesh 以及相同的答案。考虑到答案是多么简单，我觉得有点傻......

【解决方案3】：

根据我对您问题的理解。可能以下是您的答案。如有错误请指正。

<style type="text/css">
   .page1content a
{
color:red;
}
      .footer a
{
color:pink;
}
</style>
<body>
<div class="page1content">
<p>text here 
<a href="someurl.com"> link here </a> 
more text 
<a href="secondurl.com"> second link</p> 
</div>

<div class="footer">
<p>even more text
<a href="thirdurl.com"></a></p>
</div>
</body>

【讨论】：

【解决方案4】：

您已经有了在纯 HTML 和 CSS 中执行此操作的方法。不需要Javascript。

换句话说，您想要定位两个类中的内容。而且你也忘了关闭你的 p 和一个标签。

示例：

CSS

#content1 p {
    color: green;
}

#content1 a {
    color: yellow;
}

#content2 p {
    color: blue;
}

#content2 a {
    color: red;
}

HTML

<div id="content1">
    <p>Text here <a href="someurl.com">and link here,</a> more text <a href="secondurl.com"> second link</a></p>
</div>

<div id="content2">
    <p>Text here <a href="someurl.com">and link here,</a> more text <a href="secondurl.com"> second link</a></p>
</div>

链接：

http://jsfiddle.net/vA369/2/

【讨论】：

【解决方案5】：

让我们以您的代码为例。

标签<a></a>有它的默认颜色。如果你想要<a></a>有与鞋面同色<p></p>

<p>text here <a href="someurl.com"> link here </a> more text <a href="secondurl.com"> second link</p>

您必须重新设置 CSS。 <style>a{color:inherit}</style>
您可以通过更改 CSS 来实现。

<style>.page1content a {color:red}</style>

表示在哪个类的div中标签'a'的颜色 'page1content'
你也可以通过你提到的javascript来做到这一点。

但是你犯了一个错误。getElementsByTagName 将返回一个数组，不只是一个。数组包含所有结果。

例如，你可以得到第一个<p>...</p document.getElementsByTagName('p')[0]

【讨论】：