css - 放置在标签内时显示 pdf 图标的图像标签

Question

我们使用 a[href*=".pdf"]当 href 以 .pdf 作为其扩展名时，CSS 选择器规则显示 pdf 图标，但问题是它显示为 <a>标签内还有图片标签。

<a href="foo.pdf">foo</a> => Works fine
<a href="foo.pdf"><img src="big_image.gif" /></a> => No good. 

我们不想为此类链接显示 PDF 图标。

请问我们应该为这种情况编写什么样的 CSS 选择器？

Answer 1

恐怕没有 CSS 选择器可以让您选择没有 <img> 的链接他们里面的标签。 (参见 CSS selector for "foo that contains bar"?。)

jQuery 允许您通过 its :has() selector 选择确实包含图像的链接.您可以使用它向链接添加一个类，其中包含图像，并使用该类关闭您的 PDF 样式。

否则，您需要在服务器上为这些链接添加一个类。