批量为页面所有pdf,word,excel链接 添加图标表示

2022-01-24 09:59:40 浏览数 (1)

1111111111

as

在CSS3中与一个选择器叫做属性选择器

如

代码语言：javascript复制
a[href$='pdf']

这样就是选中所有的a链接以pdf结尾的元素

然后在配合backgroud-image与backgroud-position 设置背景图片

代码语言：javascript复制
  // 附件样式
  .fujian-list{
    .file_link{
      background-image: url('../images/icon-file.png');
      background-repeat: no-repeat;
      background-position: 2px;
      padding-left: 30px;
    }
    .file_link[href$=pdf],.file_link[href$=PDF]{
      background-image: url('../images/icon-pdf.png');
    }
    .file_link[href$=doc],.file_link[href$=docx]{
      background-image: url('../images/icon-word.png');
    }
    .file_link[href$=jpg],.file_link[href$=JPG],.file_link[href$=png],.file_link[href$=PNG],.file_link[href$=jpeg],.file_link[href$=JPEG]{
      background-image: url('../images/icon-pic.png');
    }
  }
image pdf position

0 人点赞