0

我的博客模拟了一个终端屏幕,所以当鼠标悬停时,普通文本是绿色的,链接是红色的,背景是红色的。由于我在整个博客中使用等宽字体,<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>

鼠标在 <a> 元素上 鼠标现在位于 <code> 元素上

有没有办法让链接的样式<code>与普通链接不同?先感谢您。

4

1 回答 1

0

我认为您正在寻找contains()选择器,它不再是css3 选择器规范的一部分

要实现这一点,您将需要查看 js 框架解决方案,如has() jquery 或动态 css 解决方案,如less

于 2013-09-15T05:01:11.690 回答