使用CSS更改当前页面的链接颜色 [英] Change link color of the current page with CSS

问题描述

当前页面的某个样式与其他页面的区别如何？我想交换文本和背景的颜色。

HTML：

 < ul id =navigation> 
< li class =a>< a href =/>主页< / a>< / li> 
< li class =b>< a href =theatre.php>影院< / a>< / li> 
< li class =c>< a href =programming.php>编程< / a>< / li> 
< / ul> 
  

CSS：

  li a {
 color：＃A60500; 
} 
 
 li a：hover {
 color：＃640200; 
 background-color：＃000000; 
 
  

解决方案

a：active ：当您点击链接并按住它时（ active！）。

a：visited code>：链接已经被访问时。

如果您希望突出显示与当前页面对应的链接，您可以为链接定义一些特定样式 -

  .currentLink {
 color：＃640200; 
 background-color：＃000000; 
} 
  

只将这个新类添加到相应的 li （链接），无论是在服务器端还是在客户端（使用JavaScript）。

How does one style links for the current page differently from others? I would like to swap the colors of the text and background.

HTML:

<ul id="navigation">
    <li class="a"><a href="/">Home</a></li>
    <li class="b"><a href="theatre.php">Theatre</a></li>
    <li class="c"><a href="programming.php">Programming</a></li> 
</ul>

CSS:

li a{
    color:#A60500;
}

li a:hover{
    color:#640200;
    background-color:#000000;
}

解决方案

a:active : when you click on the link and hold it (active!).
a:visited : when the link has already been visited.

If you want the link corresponding to the current page to be highlighted, you can define some specific style to the link -

.currentLink {
   color: #640200;
   background-color: #000000;
}

Add this new class only to the corresponding li (link), either on server-side or on client-side (using JavaScript).

这篇关于使用CSS更改当前页面的链接颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！