可以使用 CSS 从图像中删除 mime 类型图标吗？答案

【问题标题】：Removing mime type icon from image using CSS, possible?可以使用 CSS 从图像中删除 mime 类型图标吗？
【发布时间】：2017-02-22 23:17:54
【问题描述】：

我目前正在使用一些 CSS 来为上传的文件和/或以 .pdf、.xls、.docx 等结尾的链接附加令人敬畏的字体图标作为 mime 类型。

我应该在整篇文章的开头加上我发表的评论：

好的，我应该提到这是一个 WordPress 网站，用户可以通过媒体上传器上传和链接图像。试图自动化这个过程，以便（一旦交付）编辑器不必将 HTML 代码添加到可视化编辑器。话虽如此，所有 WP 图像都有一个分配给它们的类“.wp-image-*”，是否可以使用该 WP 类来过滤图标？

我的 CSS 如下所示：

a[href$=".pdf"]::after {
  font-family: "fontawesome";
  content: "\0020\f1c1";
  color: inherit;
  font-weight: 400
}

此解决方案完全按照我的意愿工作，但有一个例外...它将 mime 类型图标附加到 链接到 .pdf 的图像，而不仅仅是文本链接。

如何仅在图像上删除或不显示字体真棒图标？就是那个问题。我尝试了许多不同的 CSS 解决方案，并提出要么删除链接到 .pdf 的整个图像，要么什么都不删除。

在这里寻找一些指导，希望解决方案是 CSS 但我愿意接受任何最有效的方法（php、js、jquery 等）。

这里有一个例子：

（文字链接）

<a href="example.pdf">Example PDF</a>

这按预期工作。

这就是问题所在……

（下图链接）

 <a href="example.pdf">
   <img src="example.jpg" alt="example pdf" />
 </a>

当链接包装图像时，它会将字体真棒图标附加到图像上。如何停止仅包含在链接中的图像上的字体真棒图标？

我的页面代码看起来像这样（不是逐字），同样，使用 BootStrap 库：

<div class="container">
  <div id="main_content">
     <!-- Then there are the usual basic tags found in WordPress content such as <p><h1><blockquote> etc but the containing div is "main_content", no <div>'s before image -->
    <p>
      <a href="http://example-document.pdf">
       <img class="alignright size-medium wp-image-639 img-responsive" src="http://example-image.jpg" alt="Alt Title" srcset="http://example-image.jpg 232w, http://example-image.jpg 613w" sizes="(max-width: 232px) 100vw, 232px">
      </a>
    </p>
  </div>
</div>

【问题讨论】：

just text links 是什么样子的？ ...您所说的如何仅在图像上删除或不显示字体真棒图标是什么意思？ ...发布一个无法按您希望的方式工作的示例，我们将看看是否我们可以提供帮助
已更新示例。
@LGSon 再次感谢您不仅提供解决方案，还感谢您跳出框框思考和知识转移。我从您的示例和 cmets 中学到了很多有用的信息。我正在创建一个 php 函数以将您的“data-hasimg”属性附加到链接文件，但随后您启动了该 JS 示例，这正是我想要的。感谢您抽出时间和精力。非常感谢。
谢谢你，我很乐意提供帮助

标签： html css mime-types font-awesome show-hide

【解决方案1】：

要使用现有标记解决它，您需要一个父选择器，而那些不存在（目前）。

一种解决方法是使用span 将文本包装在仅文本链接中，并使用:not(img) 选择器更新CSS 规则

a[href$=".pdf"] :not(img)::after {
  content: " X";
  color: red;
  font-weight: 400
}

<a href="example.pdf"><span>Example PDF</span></a>
<br>
 <a href="example.pdf">
   <img src="http://placehold.it/100" alt="example pdf" />
 </a>

或者在包含图片的链接上添加data-*属性

a[href$=".pdf"]:not([data-hasimg])::after {
  content: " X";
  color: red;
  font-weight: 400
}

<a href="example.pdf">Example PDF</a>
<br>
 <a href="example.pdf" data-hasimg>
   <img src="http://placehold.it/100" alt="example pdf" />
 </a>

如果您无法更改标记，这里是一个脚本示例

var links = document.querySelectorAll('a[href$=".pdf"]');
for (var i = 0; i < links.length; i++) {
  if (links[i].children.length == 0) {
    links[i].classList.add('icon');
  }
}

a[href$=".pdf"].icon::after {
  content: " X";
  color: red;
  font-weight: 400
}

<a href="example.pdf">Example PDF</a>
<br>
<a href="example.pdf">
  <img src="http://placehold.it/100" alt="example pdf" />
</a>

【讨论】：

好的，我应该提到这是一个 WordPress 网站，用户可以通过媒体上传器上传和链接图像。试图自动化这个过程，以便（一旦交付）编辑器不必将 HTML 代码添加到可视化编辑器。话虽如此，所有 WP 图像都有一个分配给它们的类“.wp-image-*”，是否可以使用该 WP 类来过滤图标？
@ben.kaminski 不，因为它们以图像为目标，这是链接的子节点，需要父选择器。
父选择器可以是包含的div吗？例如，包含 div 的 id 为“#main_content”？感谢您迄今为止的帮助@LGSon
@ben.kaminski 告诉我这是什么样子，将其添加到您的问题中。
@ben.kaminski 添加了一个使用脚本的 3:rd 示例，以防万一

【解决方案2】：

将你的文本放在一个跨度中，并给它一个这样的类名：

a[href$=".pdf"] .text:after {
  font-family: "fontawesome";
  content: "\0020\f1c1";
  color: inherit;
  font-weight: 400
}


<a href="example.pdf"><span class="text">Example PDF</span></a>

<a href="example.pdf">
   <img src="example.jpg" alt="example pdf" />
 </a>

【讨论】：