html - 修改父元素样式

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 框架解决方案，例如 has()在 jquery 或动态 css 解决方案中，例如 less