CSS分组选择器与:hover属性结合使用时失效的问题咨询

你的CSS分组选择器写法有误，导致只有h6的hover状态能触发阴影效果。问题出在这段代码：

h1,h2,h3,h4,h5,h6:hover {
    box-shadow: 10px 10px 0 rebeccapurple;
}

这段代码的实际作用是：直接选中h1-h5元素（无论是否 hover），同时选中hover状态下的h6元素。但你要的是hover时才显示阴影，h1-h5的初始样式里没有阴影，自然看不到预期效果。

修正方法1：给每个标题选择器都添加:hover伪类 #

把:hover分别加到每个h标签选择器后面，确保所有标题的hover状态都能触发样式：

h1:hover,
h2:hover,
h3:hover,
h4:hover,
h5:hover,
h6:hover {
    box-shadow: 10px 10px 0 rebeccapurple;
}

修正方法2：使用CSS :is()选择器简化代码 #

如果浏览器兼容允许，可以用:is()选择器一次性给所有标题的hover状态设置样式，代码更简洁：

:is(h1, h2, h3, h4, h5, h6):hover {
    box-shadow: 10px 10px 0 rebeccapurple;
}

修改后，鼠标悬停在任意标题上时，都会显示rebeccapurple颜色的阴影效果。

内容的提问来源于stack exchange，提问作者DIP KR GUCHAIT