CSS按钮hover背景色失效求助：仅单个按钮样式生效

哦，这个问题我太熟了！你遇到的是CSS选择器命名规则的坑——你的第二个按钮id是7w，直接以数字开头，导致CSS里的#7w:hover根本不被浏览器识别，所以hover背景色样式完全没生效。

为什么会这样？ #

CSS的选择器命名规则明确规定：id、类名的第一个字符必须是字母（a-z/A-Z）、下划线_，或者以连字符-开头且后续跟字母/数字，不能直接用数字作为开头字符。浏览器遇到不符合规则的选择器时，会直接忽略它，自然不会应用对应的样式。

两种解决办法 #

办法1：修改id为合法名称（推荐）

直接把HTML里的id="7w"改成符合规则的名称，比如id="w7"或者id="seven-wonders"，然后对应修改CSS选择器：

• 修改后的HTML：

<button class="projb" id="w7" onclick="ww()"> 7 Wonders </button>
<button class="projb" id="sa" onclick="sa()"> Save animals </button>

• 对应修改后的CSS：

#w7:hover { background-color: black; }
#sa:hover { background-color: burlywood; }

办法2：使用CSS属性选择器（不修改id的情况下）

如果不想改动HTML的id，可以用属性选择器来匹配这个id，属性选择器不受开头数字的限制：

[id="7w"]:hover { background-color: black; }
#sa:hover { background-color: burlywood; }

额外说明 #

你现有的.projb:hover里的transform样式不受影响，因为类选择器是合法的，而且id选择器的优先级比类高，所以新增的hover背景色会正常叠加生效，不会被类样式覆盖。

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