Question

我试图找到一种从链接图片中删除超链接样式的方法。这是超链接的样子： Linked Text Example

这是目前链接图片的样子： Linked Image Example

你可以看到绿色线穿过图像的背景。我有超链接的样式和单独引用的超链接图像：

/**** HYPERLINK STYLING ******/
a, a:visited, a:focus {
  text-decoration:none;
  border-bottom: 2px solid #8dc635;
  box-shadow: inset 0 -1px 0 #8dc635;
  color: rgba(35, 35, 35, 0.8);
  transition: 0.65s;
}

a:hover {
  background: #8dc635;
}

/**** Don't style images with border / box-shadow ***/
a img {
  border-bottom: none !important;
  box-shadow: none !important;
  outline : none !important;
  background:transparent !important;
}

a img:hover {
  border-bottom: none !important;
  box-shadow: none !important;
  outline : none !important;
  background:transparent !important;
}

我甚至尝试过使用！important函数（尽管我不喜欢），并试过这个： / ********图像/图像中没有颜色********************* /

a[href$=".png"] {
  background-color: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
a[href$=".png"]:hover{
  background-color: transparent !important;
  border-bottom: none;
  box-shadow: none;
}

没有任何效果。。。我不必进入并为网站上的每个图像添加一个类，我无法思考如何使文本超链接的选择器更具体，而不会意外地排除链接。想法？

Answer 1

您可能使用了错误的选择器。请看以下示例：

<a href="index.html">home</a>
<a href="contact.html">
    <img src="me.png" />
</a>

现在让我们看看你的CSS是如何应用的。

选择器a适用于所有<a>元素，在这种情况下包括文本链接和图像链接。
选择器a img适用于 {/ 1}}元素内的所有<img>元素。

您的CSS正在影响<a>元素并尝试删除其边框，轮廓和阴影;然而，图像本身从来没有。您看到的装饰来自<img>包裹<a>元素的<img>元素。

目前没有CSS选择器可以选择具有某种类型的 children 的元素。这是我的建议：

a:not(.image-link) { text-decoration:none; border-bottom: 2px solid #8dc635; box-shadow: inset 0 -1px 0 #8dc635; color: rgba(35, 35, 35, 0.8); transition: 0.65s; } <a href="index.html">home</a> <a href="contact.html" class="image-link"> <img src="me.png" /> </a>

:not()伪类否定了括号内的选择器，因此a:not(.image-link)将选择不具有类<a>的所有image-link元素（在这种情况下，第一个），并将装饰应用于那些。不幸的是，这确实会让您有一些额外的工作和责任，因为您必须确保所有图像链接都被赋予image-link类。

Answer 2

我认为你的问题是图像下方的下划线？（你没有真正描述你的问题......）

在这种情况下，border-bottom是错误的属性，必须是text-decoration: none

修复超链接图像，以便它们不会继承链接样式

2 个答案: