实施例

Question

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

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

据我所知，每个页面都有单独的css文档，但我想将整个网站保存在一个css页面上，所以当我想进行全面的更改时，我不必单独更新每个样式表

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

<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">等替换为每页。

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

<div class="page3">

进入一个给定的页面，希望它会使该页面上所有<script type="text/javascript"> var myObj = document.getElementsByTagName("a"); myObj.style.color="green"; </script>标签内的文本颜色变为绿色，但它似乎不起作用。

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

<a>

希望这会将我的<script type="text/javascript"> var myObj = document.getElementsByTagName("p"); myObj.style.color="green"; </script>文本全部变为绿色，但这也不起作用，所以很明显我错误地编写了JavaScript，对于初学者来说。

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

谢谢！

Answer 1

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

body#myBody1 a {color: red;}

body#myBody2 a {color: blue;}

Answer 2

的 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

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

Answer 4

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

您希望以其他方式定位两个类中的内容。而你也忘了关闭你的标签。

实施例

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/

Answer 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]

使用相同的css doc在不同的html页面上使用不同的链接颜色

5 个答案:

实施例

CSS

HTML

链接：