CSS：是否可以使用IMG Alt属性进行样式设计？

Question

这是我以前没有必须解决的问题。

为了维护遗留系统，我无法直接编辑HTML以将CSS类添加到图像标记。

但是可以使用图像标签的替代文字进行样式化吗？

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

我想使用alt-attribute中的文本“front”来设置图像的样式，如：

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

是的你可以。 使用~=选择器选择“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首先指出的*=选择器。

Answer 3

它应该是可能的，它是。 在你的情况下，你应该写这样的东西。

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

它适用于每个属性。您甚至可以使用此方法来处理/替换类或ID。 它应该不是现代浏览器的问题。 例如

 #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>