Question

我想创建一个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的理念吗？

Answer 1

通常说，由style属性选择的选择器的问题是它可能导致无限循环。例如，一个具有属性的选择器，该属性尝试将该属性设置为另一个值并返回：

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

我认为已经多次提出并遭到拒绝。当然有几个反驳论点和点，例如禁止在规则中设置相同的属性等，但这些不属于你的问题范围，所以我不会详细说明。如果您搜索the mailing list archives，您应该能够找到关于此问题的大量讨论。

FWIW，图像值4级实际上提到了image-set()函数，它允许您为不同的分辨率指定不同的图像，我相信在WebKit浏览器中可以找到一些实现的外观（当然，{ {1}}）。但是，我不认为它的设计可以按字体大小本身进行扩展;它意味着根据我所看到的分辨率进行缩放，这可能是也可能不是一个不同的问题。

我认为这里最安全的选择是使用矢量图像格式，如SVG，可以优雅地缩小，但保持大尺寸的完整性。这样，图像就会担心缩放，所以你不必这样做。从您的代码来看，我认为浏览器支持不会引起太大关注：IE9支持SVG图像以及其他CSS代码。

哦，因为我们在这里讨论的是选择器，所以-webkit-image-set()和:link只会被HTML中的:visited所满足。如果您不需要伪类特性，则可以通过完全删除这些伪类来减少选择器的冗余，因为您已经拥有适当的a[href]属性选择器。所以不要这样：

href

你可以这样做：

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

甚至这个：

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

CSS选择器可以解决线路高度吗？

1 个答案: