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

Question

我目前正在使用一些 CSS 为上传的文件和/或以 .pdf、.xls、.docx 等结尾的 link 追加超棒的字体图标作为 mime 类型。

我应该在整个 post 开头加上我发表的评论：

好的，我应该提到这是一个 WordPress 网站，用户可以在其中通过媒体上传器上传和 link 图片。尝试自动执行此过程，以便（一旦交付）编辑器不必向可视化编辑器添加 HTML 代码。话虽如此，所有 WP 图片都分配了一个 class，即“.wp-image-*”，是否可以使用 WP class 来过滤图标？

我的 CSS 看起来像这样：

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

除了一个例外，此解决方案完全符合我的要求...它将 mime 类型图标附加到 图像，LINK 附加到 .pdf，而不仅仅是文本 links.

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

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

举个例子：

(文字link)

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

这按预期工作。

这就是问题...

（下图 link）

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

当 link 包裹图像时，它会在图像上附加超赞字体图标。如何停止仅在 link 中包裹的图像上的超赞字体图标？

我的页面代码看起来像这样（不是一字不差），同样，使用 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>

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

Answer 2

将您的文本放在一个 span 中并给它一个 class 名称，如下所示：

a[href$=".pdf"] .text:after {
  font-family: "fontawesome";
  content: "[=10=]20\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>

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

Removing mime type icon from image using CSS, possible?

html

css

show-hide

mime-types

font-awesome