css - 显示 :none to image if class

Question

我使用上面的代码在每个要下载的 pdf 文件之前显示 pdf 图标。

a[href*="pdf"]::before {
    content: url('../gfx/pdficon.png');
    display: inline-block;
    vertical-align: middle;
    padding-right: 5px;
}

当图标与像 img 这样的对象一起出现时，我遇到了问题，我不想要这个图标。我想出了创建一个类“nopdf”的想法，以添加到没有此图标的图像中。

如何在 css 中应用它？我想这足以“显示:无”，但在这种情况下如何构建规则 css？

编辑:只有当我将 (href) 链接到图像时才会出现问题。然后在图像之前我看到了 pdf 图标。

Answer 1

a.nopdf::before {
  display: none !important;
}

或者您只是像这样扩展现有规则:

a[href*="pdf"]:not( .nopdf )::before {
    content: url('../gfx/pdficon.png');
    display: inline-block;
    vertical-align: middle;
    padding-right: 5px;
}