Question

我试图在我用html创建的每个页面的链接上使用不同的文本修饰。我为第一个做的是：

a
{
    color: #0033AA;
    text-decoration: none;
}

有没有办法为我创建的每个页面分隔此代码？我不是要求解决方案，比如“在每个<a href... >中使用一个类或id”或“创建不同的css文件”。有什么想法吗？

Answer 1

关键时刻必须有所不同。放入容器div，为每个容器指定一个不同的类，然后将链接指定为.container a:link。

CSS：

.homeContainer a:link {
   color: red;
}

.aboutContainer a:link {
   color: blue;
}

HTML

<div class="homeContainer">
  <p><a href="link">Link Here</a></p>
</div>

<div class="aboutContainer">
  <p><a href="link">Link Here</a></p>
</div>

Answer 2

您可以使用class：

css文件：

a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}

a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}

html：

<a class="one" href="defaultOne.html" target="_blank">first link</a>
<a class="two" href="defaultTwo.html" target="_blank">second link</a>

Answer 3

你的意思是你希望它是特定于网址的吗？即cnn.com的a是蓝色，espn.com的a是橙色的吗？试试这个，

a[href='http://www.cnn.com'] {
    color:#0000ff;
}
a[href='http://www.espn.com'] {
    color:#ff0000;
}

Answer 4

你可以使用CSS的第n个儿童技巧。

  a:nth-child(1) {
    background: #ff0000;
}

Answer 5

您可以使用jquery来执行此操作。

var pathname = window.location.pathname; 
if(pathname == the_path_you_want){
  $('a').css('color','color-you-choose');
}

使用css的链接上的不同文本装饰

5 个答案: