无法为所有按钮统一设置:hover伪类样式的问题求助

我想简化代码，为所有按钮设置统一的:hover效果，但这个样式没生效。之前通过指定ID的方式是可以正常工作的，以下是我的CSS代码和HTML结构：

我的CSS代码 #

.Strings>.normalStrings>button:hover{
    transition-duration: 0.7s;
    background-color: hsl(75, 94%, 57%);
    border-color: hsl(75, 94%, 57%);
    color: black;
}

我的HTML结构 #

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <title>Social Links Profile</title>
    <link rel="stylesheet" href="design.css"/>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet"/>
  </head>
  <body>
    <!--This is for the grey boarder around the profile-->
    <div class="container">
      <!--Jessica's Image-->
      <section class="PFP">
        <img src="assets/images/avatar-jessica.jpeg" alt="oops did not load"/>
      </section>
    </div>
    <!--The Strings-->
    <div class="Strings">
      <section class="Titles">
        <h1 id="id01">Jessica Randall</h1>
        <p id="id02">London, United Kingdom</p>
      </section>
      <section class="normalStrings">
        <p id="Description">"Front-end developer and avid raeder."</p>
        <a href="https://github.com" target="_blank"><button id="GitHub">Github</button></a>
        <a href="https://frontendmentor.io" target="_blank"><button id="frontendMentor">Frontend Mentor</button></a>
        <a href="https://www.linkedin.com" target="_blank"><button id="Linkedln">Linkedln</button></a>
        <a href="https://twitter.com" target="_blank"><button id="Twitter">Twitter</button></a>
        <a href="https://instagram.com" target="_blank"><button id="Instagram">Instagram</button></a>
      </section>
    </div>
  </body>
</html>

解决方案 #

问题根源 #

问题出在CSS优先级上：你之前用ID（比如#GitHub）写的按钮基础样式，优先级远高于现在用的类选择器组合.Strings>.normalStrings>button:hover，导致hover样式被ID的基础样式覆盖，无法显示。

两种修复方式 #

方式1：快速提升优先级（临时解决）

给hover样式的属性加上!important，强制覆盖ID样式：

.Strings>.normalStrings>button:hover{
    transition-duration: 0.7s;
    background-color: hsl(75, 94%, 57%) !important;
    border-color: hsl(75, 94%, 57%) !important;
    color: black !important;
}

注意：!important尽量少用，会增加样式维护难度。

方式2：规范重构（推荐）

给所有按钮添加统一的类名，用类选择器管理基础样式和hover样式，避免依赖ID写样式：

1. 修改HTML，给每个按钮添加social-btn类：

<a href="https://github.com" target="_blank"><button id="GitHub" class="social-btn">Github</button></a>
<a href="https://frontendmentor.io" target="_blank"><button id="frontendMentor" class="social-btn">Frontend Mentor</button></a>
<a href="https://www.linkedin.com" target="_blank"><button id="Linkedln" class="social-btn">Linkedln</button></a>
<a href="https://twitter.com" target="_blank"><button id="Twitter" class="social-btn">Twitter</button></a>
<a href="https://instagram.com" target="_blank"><button id="Instagram" class="social-btn">Instagram</button></a>

2. 修改CSS，用类选择器统一管理：

/* 统一按钮基础样式 */
.social-btn {
    /* 把之前ID里的基础样式移到这里，比如： */
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background-color: #333;
    color: white;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.7s ease; /* 把过渡放在基础样式，鼠标移出也有动画 */
}

/* 统一hover效果 */
.social-btn:hover {
    background-color: hsl(75, 94%, 57%);
    color: black;
}

额外优化建议 #

• 把transition属性放在按钮的基础样式里，而不是hover状态中，这样鼠标移入移出都会有平滑过渡，体验更好。
• 移除按钮的ID样式，统一用类管理，后续修改样式更方便。

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