HTML/CSS新手求教如何为两个下拉按钮设置不同背景色

问题原因 #

• 你写了两套完整的HTML文档结构（包含两个<!DOCTYPE html>、<html>、<head>、<body>标签），浏览器解析时后定义的.dropbtn样式会覆盖前一套的样式，所有绑定.dropbtn类的元素都会应用最后加载的样式。
• 两个下拉按钮使用了完全相同的类名，没有做区分，无法单独匹配不同的颜色样式。

修正方案 #

只保留一套HTML结构，给两个按钮新增不同的额外类名分别控制颜色，公共样式无需重复编写，修正后的完整代码如下：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* 公共样式，两个按钮通用 */
.dropbtn {
  color: white;
  padding: 20px;
  font-size: 16px;
  border: none;
}
/* 第一个按钮的专属颜色 */
.dropbtn-green {
  background-color: #459b7a;
}
/* 第二个按钮的专属颜色 */
.dropbtn-blue {
  background-color: #1375b9;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}
/* 分别写两个按钮的hover样式 */
.dropdown:hover .dropbtn-green {background-color: #459b7a;}
.dropdown:hover .dropbtn-blue {background-color: #1375b9;}
</style>
</head>
<body>

<!-- 第一个下拉框，用绿色按钮类 -->
<div class="dropdown">
  <button class="dropbtn dropbtn-green">Family 2</button>
  <div class="dropdown-content">
    <a value="http://www.">Victoria</a>
    <a value="http://www.">New South Wales</a>
    <a value="http://www.">Canberra</a>
    <a value="http://www.">Queensland</a>
    <a value="http://www.">Northern Territory</a>
    <a value="http://www.">Western Australia</a>
    <a value="http://www.">South Australia</a>
  </div>
</div>

<!-- 第二个下拉框，用蓝色按钮类 -->
<div class="dropdown">
  <button class="dropbtn dropbtn-blue">Family</button>
  <div class="dropdown-content">
    <a value="http://www.">Victoria</a>
    <a value="http://www.">New South Wales</a>
    <a value="http://www.">Canberra</a>
    <a value="http://www.">Queensland</a>
    <a value="http://www.">Northern Territory</a>
    <a value="http://www.">Western Australia</a>
    <a value="http://www.">South Australia</a>
  </div>
</div>

</body>
</html>

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