修改父元素样式

Question

我的博客模拟终端屏幕，因此当鼠标结束时，普通文本为绿色，链接为红色，背景为红色。由于我在整个博客中使用等宽字体，<code>的样式设置为绿色背景，以区别于常规文本。同样，<code>内的<a>有一个红色背景，当鼠标结束时会变暗。有关实时版本，请参阅this test page。

以下是<a>代码的CSS（complete file here）：

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>链接设置为与普通链接不同？提前谢谢。

Answer 1

我认为您正在寻找contains()选择器，它不再是css3 selector spec

的一部分

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