CSS：是否可以使用IMG Alt屬性進行造型？

對於遺留系統的維護，我無法直接編輯HTML以將CSS類添加到圖像標籤。

但是，有可能使用圖像標籤的替代文字造型？

<img class="thumbnail" src="/H14547_front_anthrazit.jpg" alt="H14547 front anthrazit">

我想使用ALT屬性中的文本「前」的風格像圖像：

img[alt="front"] { padding: .2rem }

是否有可能使用IMG alt屬性的造型？究竟如何？

來源

2016-09-27 StandardNerd

用途：

值包含：

img[alt*="front"] { 
    padding: .2rem 
}

價值是在一個空間分隔的列表：（所以它的工作原理與「前」，而與「頭版」）

img[alt~="front"] { 
    padding: .2rem 
}

Value開頭爲：

img[alt^="front"] { 
    padding: .2rem 
}

值結束與（因此所有的ALT標籤與前結束）

a[href$="front"] { 
    padding: .2rem 
}

來源

2016-09-27 07:39:10 derdida

當然可以。使用~=選擇器選擇「if contains」。

img[alt~="front"] { 
 
    padding: .2rem; 
 
    border: 3px solid red; 
 
}

<img class="thumbnail" src="http://www.texaswildflowerpictures.com/images/flower_pink.png" alt="front"> 
 
<img class="thumbnail" src="http://www.texaswildflowerpictures.com/images/flower_pink.png" alt="H14547 front anthrazit"> 
 
<img class="thumbnail" src="http://www.texaswildflowerpictures.com/images/flower_pink.png" alt="H14547 anthrazit">

注：這適用於只喜歡alt="this is the front"一個空格分隔的字，但不會與alt="this is the frontpage"工作。但這是我想象它應該在你的情況。如果它應該在後一種情況下工作，請使用derdida首先指出的*=選擇器。

來源

2016-09-27 07:40:15 thepio

這可能是值得一提的是，如果這隻能字符串「前」是由空格從屬性值別的分隔。 – Andii

的確如此。我想象的是它應該如此。比方說，有一個圖像'alt ='，這是首頁'' - 我不希望它被CSS聲明選中。也許這只是我：P謝謝你的評論，並通知這個雖然:) – thepio

它應該是可能的，它是。在你的情況下，你應該寫這樣的東西。

img[alt*="front"] { 
    padding: .2rem 
}

它適用於每個屬性。您甚至可以使用此方法來處理/替換類或ids。它不應該是現代瀏覽器的問題。例如

#one { 
 
color:#f00; 
 
} 
 

 
[id="one"] { 
 
background-color:#0099ff; 
 
} 
 

 
.oneofus { 
 
padding:20px; 
 
} 
 

 
[class="oneofyou"] { 
 
background-color:#ff0; 
 
}

<div id="one" class="oneofus">Text</div> 
 
<p>Something something</p> 
 
<div id="one" class="oneofyou">Another Text</div>

來源

2016-09-27 07:40:40 AlFra

CSS：是否可以使用IMG Alt屬性進行造型？

回答

相關問題