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属性进行造型？

回答

相关问题