Html 修改父元素样式

我的博客模拟了一个终端屏幕，所以鼠标悬停时，普通文本是绿色的，链接是红色的，背景是红色的。由于我在整个博客中都使用单间距字体，

被设计成绿色背景，以区别于常规文本。同样，对于实时版本，
内部的

这是
的CSS（），变换了
和
标记的背景。这里有两张图片说明了这一点。在第一幅图中，我设法将鼠标指针仅放在
元素上。在第二种情况下，鼠标位于
元素上：

元素“>
元素“>

有没有一种方法可以使
链接的样式与普通链接不同？提前谢谢。
我想您正在寻找
contains（）
选择器，它不再是

要实现这一点，您需要查看js框架解决方案（如jquery）或动态css解决方案（如
），以及您希望它的外观如何？我希望鼠标悬停时，
链接可以转换背景。但是到目前为止，只有
背景，而不是
和
背景。但它们在悬停时颜色相同。
确实在悬停时有背景，这是常规文本需要的，但我想在它周围
时将其关闭。它没有。
的背景有一个5px的圆形边框。常规
的背景不是四舍五入的。如果放大，可能会看到这一点。您的意思是像
..
那样可以工作，但由于这需要一些解析来捕捉输出中的这些情况（假设它应该保持动态，并且OP不想手动插入类），这可能与建议的解决方案工作量相同。实际上，我不知道如何在
更少的
中实现这一点。也许jquery终究是一条出路。
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;
}

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;
}