Тег изображения, показывающий значок PDF при размещении внутри тега

Question

Мы используем a[href*=".pdf"] правило селектора CSS, чтобы показать значок PDF, когда href имеет расширение .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-селектор для "foo, который содержит bar"? .)

jQuery позволяет выбирать ссылки, которые содержат , содержат изображения через его :has() селектор . Вы можете использовать это, чтобы добавить класс к ссылкам с изображением внутри них, и использовать этот класс для отключения ваших стилей PDF.

В противном случае вам нужно добавить класс к этим ссылкам на сервере.