CSS：スタイリングにIMG Alt属性を使用することはできますか？

Question

これは私が前に取り組まなかったものです。

レガシーシステムのメンテナンスのために、HTMLを直接編集してイメージタグにCSSクラスを追加することはできません。

しかし、スタイリングにイメージタグの代替テキストを使用することはできますか？

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

私はのようなイメージのスタイルをALT属性内のテキスト「フロント」を使用したい：

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

は、スタイリングのためのIMG alt属性を使用することが可能ですか？どのくらい正確に？

Answer 1

用途：

値が含まれています：

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

値は、スペースで区切られたリストにあります（だから、 "フロントページ" と "前" ではなく、で動作します）

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

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

値は（ので、すべてのaltがフロントエンドとをタグ）

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

Answer 2

はいすることができますで終わります。 ~=セレクタを使用して「含まれている場合」を選択します。

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が指すように使用してください。

Answer 3

可能である必要があります。あなたの場合は、このようなものを書くべきです。それはすべてのattribute.Youで動作

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>