Html 使用CSS从图像中删除mime类型图标，可能吗？

我目前正在使用一些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
}

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>

这个解决方案完全符合我的要求，只有一个例外。。。它将mime类型图标附加到链接到.pdf的图像，而不仅仅是文本链接

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

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

举个例子：

（文本链接）

这正如预期的那样有效

这就是问题所在

（下图链接）

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

我的页面代码如下所示（不是逐字），同样，使用引导库：

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

要使用现有标记解决此问题，您需要一个父选择器，而这些选择器（尚未）不存在

一种解决方法是使用

span

将文本包装在纯文本链接中，并使用

：not（img）

选择器更新CSS规则

a[href$=”.pdf“]：非（img）：：之后{
内容：“X”；
颜色：红色；
字号：400
}

要使用现有标记解决此问题，您需要一个父选择器，而这些选择器（尚未）不存在

一种解决方法是使用

span

将文本包装在纯文本链接中，并使用

：not（img）

选择器更新CSS规则

a[href$=”.pdf“]：非（img）：：之后{
内容：“X”；
颜色：红色；
字号：400
}

将文本放在一个span中，并给它一个类名，如下所示：

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

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>

a[href$=”.pdf].文本：之后{
字体系列：“fontawesome”；
内容：“\0020\f1c1”；
颜色：继承；
字号：400
}

将文本放在一个span中，并给它一个类名，如下所示：

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

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>

a[href$=”.pdf].文本：之后{
字体系列：“fontawesome”；
内容：“\0020\f1c1”；
颜色：继承；
字号：400
}

仅仅是文本链接是什么样子。。。您所说的如何删除或不仅在图像上显示字体图标是什么意思。。。发布一个不符合您要求的示例，我们将看看是否可以用示例帮助更新。@LGSon再次感谢您提供的解决方案，以及开箱思考和知识传授。我从你的例子和评论中学到了很多有用的信息。我正在创建一个php函数，将“data hasimg”属性附加到链接文件中，但随后您启动了这个JS示例，这正是我想要的。谢谢你花时间和精力。非常感谢。谢谢你，我很乐意帮助你。只是文字链接看起来怎么样。。。您所说的如何删除或不仅在图像上显示字体图标是什么意思。。。发布一个不符合您要求的示例，我们将看看是否可以用示例帮助更新。@LGSon再次感谢您提供的解决方案，以及开箱思考和知识传授。我从你的例子和评论中学到了很多有用的信息。我正在创建一个php函数，将“data hasimg”属性附加到链接文件中，但随后您启动了这个JS示例，这正是我想要的。谢谢你花时间和精力。非常感谢。谢谢你，我很乐意帮忙。好的，我应该提到这是一个WordPress网站，用户可以通过媒体上传器上传和链接图片。尝试自动化此过程，以便（一旦交付）编辑器不必向可视化编辑器添加HTML代码。也就是说，所有WP图像都分配了一个类，即“.WP image-*”，是否可以使用该WP类来过滤图标？@ben.kaminski No，因为它们以图像为目标，该图像是链接的子级，需要一个父选择器。父选择器可以是包含的div吗？例如，包含div的id为“#main_content”？谢谢你迄今为止的帮助@LGSon@ben.kaminski告诉我这是什么样子，把它添加到你的问题中。@ben.kaminski使用脚本添加了一个3:rd示例，以防万一，好吧，我应该提到这是一个WordPress站点，用户可以通过媒体上传器上传和链接图像。尝试自动化此过程，以便（一旦交付）编辑器不必向可视化编辑器添加HTML代码。也就是说，所有WP图像都分配了一个类，即“.WP image-*”，是否可以使用该WP类来过滤图标？@ben.kaminski No，因为它们以图像为目标，该图像是链接的子级，需要一个父选择器。父选择器可以是包含的div吗？例如，包含div的id为“#main_content”？谢谢你迄今为止的帮助@LGSon@ben.kaminski让我看看这会是什么样子，把它添加到你的问题中。@ben.kaminski使用脚本添加了一个3:rd示例，以防万一它会变成这样