2

我想制作一个 CSS 样式表，允许完全没有经验的用户（使用 WYSIWYG 编辑器）在 PDF 链接旁边有 PDF 图标。但是，这可能会导致具有不同字体大小的图像被不必要的拉伸。有什么方法可以告诉我用户对这些锚点应用了什么字体大小然后应用正确的图标？

我希望有这样简单的东西：

:link[href$=".pdf"]::after,
:visited[href$=".pdf"]::after{
    background-size: 1em !important;
    background-repeat: no-repeat !important;
    background-position: 100% 50% !important;
    color:inherit !important;
    content:" " !important;
    padding-right:1.5em !important;
    text-decoration:inherit !important;
}
:link[href$=".pdf"]::after,
:visited[href$=".pdf"]::after{
    background-image:url('/images/MIME_PDF_16px.png');
}
:link[href$=".pdf"][style.line-height>16px]::after,
:visited[href$=".pdf"][style.line-height>16px]::after{
    background-image:url('/images/MIME_PDF_32px.png');
}
:link[href$=".pdf"][style.line-height>32px]::after,
:visited[href$=".pdf"][style.line-height>32px]::after{
    background-image:url('/images/MIME_PDF_48px.png');
}
:link[href$=".pdf"][style.line-height>48px]::after,
:visited[href$=".pdf"][style.line-height>48px]::after{
    background-image:url('/images/MIME_PDF_64px.png');
}
:link[href$=".pdf"][style.line-height>64px]::after,
:visited[href$=".pdf"][style.line-height>64px]::after{
    background-image:url('/images/MIME_PDF_128px.png');
}

或者，这样的事情会很好：

:link[href$=".pdf"]::after,
:visited[href$=".pdf"]::after{
    background-size: 1em !important;
    background-repeat: no-repeat !important;
    background-position: 100% 50% !important;
    color:inherit !important;
    content:" " !important;
    padding-right:1.5em !important;
    text-decoration:inherit !important;
}
:link[href$=".pdf"]::after,
:visited[href$=".pdf"]::after{
    background-image:16px 16px url('/images/MIME_PDF_16px.png'),
                     32px 32px url('/images/MIME_PDF_32px.png'),
                     48px 48px url('/images/MIME_PDF_48px.png'),
                     64px 64px url('/images/MIME_PDF_64px.png'),
                     url('/images/MIME_PDF_128px.png');
}

如果不存在这样的选择器或值，那么我应该向 W3C 提出它吗？这会违背 CSS 的哲学吗？

4

1 回答 1

3

人们常说，通过样式属性进行选择的选择器的问题在于，它可能导致无限循环。例如，具有一个属性的选择器尝试将同一属性设置为另一个值并返回：

[display=block] { display: none; }
[display=none] { display: block; }

我想它已经被提议过好几次了，但都遭到了拒绝。当然有几个反论点和观点，例如完全禁止在规则中设置相同的属性等，但这些超出了您的问题范围，所以我不会详细说明。如果您搜索邮件列表档案，您应该能够找到关于此问题的大量讨论。

FWIW，Image Values level 4 实际上提到了一个image-set()功能，它允许您为不同的分辨率指定不同的图像，我相信在 WebKit 浏览器中可以找到一些类似的实现（当然，如-webkit-image-set()）。但是，我不认为它的设计目的是根据字体大小本身进行缩放；它旨在根据我所看到的分辨率进行缩放，这可能是也可能不是不同的问题。

我想这里最安全的选择是使用矢量图像格式，如 SVG，它可以优雅地缩小尺寸，但在大尺寸下仍保持其完整性。这样，图像就会担心缩放本身，因此您不必这样做。从您的代码来看，我认为浏览器支持不会是一个大问题：IE9 支持 SVG 图像和您的其他 CSS 代码一样。

哦，因为我们在这里讨论选择器，:link并且:visited只会a[href]在 HTML 中满足。如果您不需要伪类特异性，您可以通过完全删除这些伪类来减少选择器的冗余，因为您已经拥有适当的href属性选择器。所以代替这个：

:link[href$=".pdf"]::after, :visited[href$=".pdf"]::after

你可以简单地这样做：

a[href$=".pdf"]::after

甚至这样：

[href$=".pdf"]::after
于 2013-02-12T17:30:10.973 回答