1

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

我正在寻找一种有效的方法来使<a>每个 html 页面的标签内的链接颜色不同（即一个页面将具有绿色链接，而另一个页面将具有蓝色链接），而无需添加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>

然后定义与?相关的前两个<a>标签（不影响第三个<a>标签）<div class="page1content">然后我会用 , 等替换<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>一次更改给定页面上的多个标签（而不在标签内放置类）的想法将不胜感激。

谢谢！

4

5 回答 5

1

为每个 body 元素指定一个 ID，然后在 CSS 中选择后代锚标记元素：

body#myBody1 a {color: red;}

body#myBody2 a {color: blue;}
于 2013-03-26T02:15:46.250 回答
0

您已经有了在纯 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/

于 2013-03-26T02:24:24.410 回答
0

让我们以您的代码为例。

  1. 标签<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>

  2. 您可以通过更改 CSS 来实现。

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

    它表示 div 中标签 'a' 的颜色，哪个类是 'page1content'

  3. 你也可以通过你提到的javascript来做到这一点。

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

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

于 2013-03-26T02:38:13.517 回答
0

LIVE DEMO

将 ID 添加到您的 BODY 元素，例如：

<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.

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

并仅更改此 JS 行：

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

LIVE DEMO

于 2013-03-26T02:15:14.293 回答
0

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

<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>
于 2013-03-26T02:16:19.750 回答