CSS選擇器地址線高度？

Question

我想製作一個CSS樣式表，允許完全沒有經驗的用戶（使用所見即所得編輯器）在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

通過樣式屬性選擇的選擇器的問題經常被說是它可能導致無限循環。例如，對於一個屬性選擇，試圖同屬性設置爲另一個值和背部：

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

曾有人提出過幾次，我想，並會見了拒絕。當然有幾個反駁的論點和觀點，比如禁止在規則中設置相同的屬性等等，但這些不在你的問題的範圍之內，所以我不會詳細說明。如果您搜索the mailing list archives，您應該能夠在這個問題上找到許多討論。圖像值級別4實際上提到了一個image-set()函數，它允許您爲不同的分辨率指定不同的圖像，並且我相信WebKit瀏覽器中可以找到一些實現的外觀（當然，如-webkit-image-set()）。但是，我不認爲它的設計是按照本身;它意味着從我所能看到的分辨率進行擴展，這可能是也可能不是一個不同的問題。

我想這裏最安全的選擇是使用像SVG這樣的矢量圖像格式，它可以優雅地縮放，並保持大尺寸的完整性。這樣，圖像擔心縮放本身，所以你不必這樣做。從你的代碼判斷，我收集到的瀏覽器支持並不是什麼大問題：IE9支持SVG圖像以及其他CSS代碼。

---

噢和，因爲我們在這裏談論的選擇，:link和:visited將永遠只能在HTML a[href]滿足。因爲您已經擁有合適的href屬性選擇器，所以如果您不需要僞類專用性，則可以通過完全刪除這些僞類來減少冗餘。因此，而不是這樣的：

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

你可以簡單地這樣做：

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

甚至這樣的：

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