Question

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

对于旧版系统的维护，我无法直接编辑HTML以将CSS类添加到图像标记。

但是可以使用图片标记的替代文字进行样式设计吗？

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

我想使用文字＆＃34; front＆＃34;在alt-attribute内部为图像设置样式：

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

是否可以使用IMG Alt属性进行样式设计？究竟是怎么回事？

Answer 1

使用：

值包含：

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

价值位于空格分隔列表中 :(因此，它适用于＆＃34;前＆＃34;，但不适用于＆＃34; frontpage＆＃34;）

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>

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

3 个答案: