html - 修复超链接图像，使其不继承链接样式

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适用于所有<img> 里面的元素 <a>元素。

您的 CSS 正在影响 <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。类。