html - 如何使多个链接具有不同的 CSS 样式？

Question

我在创建链接 (a href) 时遇到问题，其中某些字符以不同颜色显示但作为一个链接起作用!

我试着发挥创意，想出了以下代码。

HTML:

<a href="#" class="char1"> T </a>
<a href="#" class="char2"> E </a>
<a href="#" class="char3"> S </a>
<a href="#" class="char4"> T </a>

CSS:

a.char1:link {color:#fff; font-size:13pt; text-decoration:none;}
a.char1:visited {color:#fff; font-size:13pt; text-decoration:none;}
a.char1:active {color:#fff; font-size:13pt; text-decoration:none;}
a.char1:hover {color:blue; font-size:13pt; text-decoration:none;}

a.char2:link {color:#fff; font-size:13pt; text-decoration:none;}
a.char2:visited {color:#fff; font-size:13pt; text-decoration:none;}
a.char2:active {color:#fff; font-size:13pt; text-decoration:none;}
a.char2:hover {color:red; font-size:13pt; text-decoration:none;}

a.char3:link {color:#fff; font-size:13pt; text-decoration:none;}
a.char3:visited {color:#fff; font-size:13pt; text-decoration:none;}
a.char3:active {color:#fff; font-size:13pt; text-decoration:none;}
a.char3:link {color:green; font-size:13pt; text-decoration:none;}

a.char4:link {color:#fff; font-size:13pt; text-decoration:none;}
a.char4:visited {color:#fff; font-size:13pt; text-decoration:none;}
a.char4:active {color:#fff; font-size:13pt; text-decoration:none;}
a.char4:hover {color:yellow; font-size:13pt; text-decoration:none;}

但是当然它们不会作为单个链接...

再次为了简化我的问题，我想创建一个 a href，其中所有“四个”字符 (T, E, S, T) 在显示时以不同的颜色显示悬停(a.char:hover)。

“尽管在这种情况下只有一个字符悬停”

提前致谢!

Answer 1

像这样——将文本放入 anchor 标记内的 span 中:

 body {
   background-color: #656565;
 }
 a:link .char1 {
   color: #fff;
   font-size: 13pt;
   text-decoration: none;
 }
 a:visited .char1 {
   color: #fff;
   font-size: 13pt;
   text-decoration: none;
 }
 a:active .char1 {
   color: #fff;
   font-size: 13pt;
   text-decoration: none;
 }
 a:hover .char1 {
   color: blue;
   font-size: 13pt;
   text-decoration: none;
 }
 a:link .char2 {
   color: #fff;
   font-size: 13pt;
   text-decoration: none;
 }
 a:visited .char2 {
   color: #fff;
   font-size: 13pt;
   text-decoration: none;
 }
 a:active .char2 {
   color: #fff;
   font-size: 13pt;
   text-decoration: none;
 }
 a:hover .char2 {
   color: red;
   font-size: 13pt;
   text-decoration: none;
 }
 a:link .char3 {
   color: #fff;
   font-size: 13pt;
   text-decoration: none;
 }
 a:visited .char3 {
   color: #fff;
   font-size: 13pt;
   text-decoration: none;
 }
 a:active .char3 {
   color: #fff;
   font-size: 13pt;
   text-decoration: none;
 }
 a:link .char3 {
   color: green;
   font-size: 13pt;
   text-decoration: none;
 }
 a:link .char4 {
   color: #fff;
   font-size: 13pt;
   text-decoration: none;
 }
 a:visited .char4 {
   color: #fff;
   font-size: 13pt;
   text-decoration: none;
 }
 a:active .char4 {
   color: #fff;
   font-size: 13pt;
   text-decoration: none;
 }
 a:hover .char4 {
   color: yellow;
   font-size: 13pt;
   text-decoration: none;
 }

<a href="#">
  <span class="char1">T</span>
  <span class="char2">E</span>
  <span class="char3">S</span>
  <span class="char4">T</span>
</a>