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

【问题标题】：CSS: Is it possible to use IMG Alt attribute for styling?CSS：是否可以使用 IMG Alt 属性进行样式设置？
【发布时间】：2017-02-04 17:43:16
【问题描述】：

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

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

但是是否可以使用图像标签的替代文本进行样式设置？

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

我想使用 alt 属性中的文本“front”来设置图像的样式：

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

是否可以使用 IMG Alt 属性进行样式设置？具体如何？

【问题讨论】：

标签： html css

【解决方案1】：

用途：

值包含：

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

值在一个空格分隔的列表中：（因此它适用于“front”，但不适用于“frontpage”）

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

值以：

开头

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

值以结尾（所以所有的alt标签都以前面结尾）

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

【讨论】：

【解决方案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 首先指出的*= 选择器。

【讨论】：

值得一提的是，这仅在字符串“front”与属性值中的任何其他内容被空格分隔时才有效。
确实如此。我想这是应该的。假设有一个带有alt="this is the frontpage" 的图像 - 我不希望它被 CSS 声明选择。也许这只是我 :P 谢谢你的评论并通知这个:)

【解决方案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>

【讨论】：