我的博客模拟了一个终端屏幕，所以当鼠标悬停时，普通文本是绿色的，链接是红色的，背景是红色的。由于我在整个博客中使用等宽字体，<code>因此将其样式设置为具有绿色背景以区别于常规文本。同样，<code>内部<a>有一个红色背景，当鼠标悬停时会变暗。有关实时版本，请参阅此测试页面。
这是标签的 CSS（此处为完整文件） ：<a>
a {
color:#CD0000;
text-decoration:none;
transition: background-color .6s;
-webkit-transition: background-color .6s; /* Safari and Chrome */
-moz-transition: background-color .6s; /* Firefox 4 */
-o-transition: background-color .6s; /* Opera */
}
a:hover {
background-color:#440000;
}
对于<code>标签内的<a>标签：
a code {
/* Only apply this to code that is a hyperlink */
color: #161616;
background-color: #CD0000;
border-radius: 5px;
padding: 0 2px 0px 2px;
text-decoration:none;
transition: background-color .6s;
-webkit-transition: background-color .6s; /* Safari and Chrome */
-moz-transition: background-color .6s; /* Firefox 4 */
-o-transition: background-color .6s; /* Opera */
}
a code:hover {
background-color:#440000;
border-radius: 5px;
padding: 0 2px 0px 2px;
}
问题是，当我将鼠标悬停在诸如 之类的链接上时，和标签<a href='#'><code>long code</code></a>的背景都被转换了。这里有两张图片可以说明这一点。在第一张图片中，我设法将鼠标指针仅放在元素上。在第二种情况下，鼠标悬停在元素上：<code><a><a><code>
有没有办法让链接的样式<code>与普通链接不同？先感谢您。