如何简化WordPress中重复的CSS悬停样式代码？

你的代码重复度很高，完全可以通过正确的选择器分组来简化，先说说你之前尝试失败的原因：

你写的类似..hover h3, p, i{...}的写法是错误的，因为CSS中逗号分隔的每个选择器都是独立生效的——p和i会选中页面上所有的段落和图标，而不是hover状态下容器内的对应元素，所以必须给每个子元素选择器都加上完整的父级hover前缀。

方法一：直接分组完整选择器 #

不需要修改HTML，直接把所有重复的选择器用逗号分组：

#cont1:hover h3,
#cont1:hover p,
#cont1:hover i,
#cont2:hover h3,
#cont2:hover p,
#cont2:hover i,
#cont3:hover h3,
#cont3:hover p,
#cont3:hover i {
    color: #fff;
}

方法二：给容器添加共同类（更推荐） #

如果可以修改HTML，给#cont1、#cont2、#cont3这三个容器加上同一个类，比如class="content-block"，这样CSS可以大幅简化：

.content-block:hover h3,
.content-block:hover p,
.content-block:hover i {
    color: #fff;
}

方法三：后代通配符（需注意兼容性） #

如果这三个容器内除了h3、p、i之外，没有其他需要保留原有颜色的元素，可以用通配符进一步简化：

.content-block:hover * {
    color: #fff;
}

内容的提问来源于stack exchange，提问作者Iguu_se