如何让所有<a>标签自动应用.thumb类CSS样式无需手动添加？

当然可以做到！你不需要逐个给<a>标签添加class="thumb"，只需要调整CSS中的选择器，让样式自动作用于所有<a>元素即可。

具体修改步骤： #

原来的CSS使用的是类选择器（.thumb），只会匹配带有class="thumb"的元素。我们只需要把所有.thumb替换成元素选择器a，就能让样式应用到页面上所有的<a>标签：

修改后的CSS代码：

img{width:85%; height:auto;} 
#thumbwrap { position:relative; } 
a img { border:1px solid #000; margin:3px; float:left; } 
a span { position:absolute; visibility:hidden; } 
a:hover, a:hover span { visibility:visible; z-index:1; }

额外说明（可选）： #

如果你只想让包含<span>和<img>的<a>标签应用这个样式（避免影响其他普通文本链接），可以使用更精准的:has()选择器（目前主流现代浏览器已支持该选择器）：

img{width:85%; height:auto;} 
#thumbwrap { position:relative; } 
a:has(> span > img) img { border:1px solid #000; margin:3px; float:left; } 
a:has(> span > img) span { position:absolute; visibility:hidden; } 
a:has(> span > img):hover, a:has(> span > img):hover span { visibility:visible; z-index:1; }

这样修改后，你的HTML代码不需要做任何改动，所有<a>标签（或者符合条件的<a>标签）都会自动应用你想要的悬停显示图片的样式啦！

内容的提问来源于stack exchange，提问作者J. Sumittanun