CSS超链接样式

Question

我使用如下样式成功地设置了指向文档下载的链接样式:

a[href $='.pdf']{
  background-image: url('http://myserver/pdficon_sm.gif');
}

有许多应用特定文档图标的链接，但也有其他链接连接到 html 页面，当然没有文档扩展名。

我正在尝试找到一种方法来定位所有具有 .ext 的超链接，ext 可以是 .doc、.pdf 等。 不幸的是，标记没有描述性的类数据，我也无权添加类。

这样我就可以避免为所有目标文档扩展重复填充等代码，并排除非文档扩展超链接

附:

如果我的初稿不清楚这个问题，我深表歉意

Answer 1

我看不到任何一个 CSS 选择器可以用来定位所有这些类型的所有链接，并且只对这些类型的所有链接应用通用样式除非您在服务器生成这些链接时提供更多信息 .

我建议为此使用数据属性并将其放在生成的链接的 html 上:

<a data-linktype="non-web-document" href="files/myPdf.pdf">myPdf</a>

然后使用属性选择器为此链接类型创建通用规则集:

a[data-linktype="non-web-document"] {
    /* you css that applies to all those links */
}

或者，更简单、更直接的方法是使用一个 css 类:

<a class="file-link" href="files/myPdf.pdf">myPdf</a>

a.file-link {
    /* you css that applies to all those links */
}

如果您的文件扩展名图标名称遵循严格的命名约定，您可以使用 SASS 为自己节省大量的输入/c&p 工作。为您生成特定于文档类型的规则。

@each $fileExtension in pdf, docx, xls, doc {
  a[href$=".#{$fileExtension}"] {
    background-image: url('/images/#{$fileExtension}icon_sm.png');
  }
}

会生成

a[href$=".pdf"] {
  background-image: url("/images/pdficon_sm.png");
}

a[href$=".docx"] {
  background-image: url("/images/docxicon_sm.png");
}

a[href$=".xls"] {
  background-image: url("/images/xlsicon_sm.png");
}

a[href$=".doc"] {
  background-image: url("/images/docicon_sm.png");
}

@each

The @each directive usually has the form @each $var in <list or map>. $var can be any variable name, like $length or $name, and <list or map> is a SassScript expression that returns a list or a map. The @each rule sets $var to each item in the list or map, then outputs the styles it contains using that value of $var.

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#each-directive

如果您想先试验一下，您可能需要使用 SassMeister.com用于快速测试。