html - 使用 CSS 从图像中删除 mime 类型图标,可能吗?

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

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

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

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

我的 CSS 看起来像这样:

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

除了一个异常(exception),此解决方案完全按照我的要求工作...它将 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>

最佳答案

要使用现有标记解决它,您需要一个父选择器,而这些选择器(目前)还不存在。

一个解决方法是用 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>

关于html - 使用 CSS 从图像中删除 mime 类型图标,可能吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40027660/

相关文章:

javascript - 在网页(不是本地主机)上实时显示图片(位于计算机上)

jquery - 为什么我的div不淡出

html - iPhone 不允许输入文本对 HTML 表单是可写的

html - 左侧的行内 block 位置和右侧的行内 block 位置 - 同一行

css - ng 风格的范围值

json - 如果 REST API 返回 JSON,那么 MIME 类型是什么?

iis-7.5 - HTTP 错误 404.3 - 在 IIS 7.5 中未找到

javascript - 如何通过动态 react 更改类的 css

html - 删除白色边框页脚

javascript - 切片 blob 时无法设置正确的 MIME 类型