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