如何用CSS为同class的三个按钮设置不同颜色？附替代方案

没问题，我帮你分两种场景解决这个问题：

你可以利用CSS的结构性伪类选择器:nth-child()，针对同一父元素下的第n个按钮单独设置样式，完全不需要修改HTML结构，纯CSS就能搞定。

HTML结构（模拟你的页面结构） #

<div class="full-width">
  <div class="generic">
    <div class="third">
      <p>
        <a href="#">按钮1</a>
        <a href="#">按钮2</a>
        <a href="#">按钮3</a>
      </p>
    </div>
  </div>
</div>

CSS代码 #

/* 保留你原有的基础按钮样式 */
.full-width .generic .third p a { 
  background-color: #543D91; 
  border-bottom: 1px solid #fff; 
  color: #fff; 
  display: block; 
  float: left; 
  padding: 10px 0; 
  width: 100%; 
  border-radius: 99em;
  text-align: center; /* 新增：让按钮文字居中更美观 */
  margin-bottom: 8px; /* 新增：给按钮之间加间距 */
}

/* 分别给三个按钮设置不同背景色 */
.full-width .generic .third p a:nth-child(1) {
  background-color: #543D91; /* 第一个按钮保留原有颜色 */
}

.full-width .generic .third p a:nth-child(2) {
  background-color: #2ECC71; /* 第二个按钮设为绿色 */
}

.full-width .generic .third p a:nth-child(3) {
  background-color: #E74C3C; /* 第三个按钮设为红色 */
}

/* 新增：清除浮动，避免父元素高度塌陷 */
.full-width .generic .third p::after {
  content: "";
  display: table;
  clear: both;
}

这个方案直接复用了你原有的CSS选择器，通过:nth-child()精准定位每个按钮，能在JSFiddle里直接运行。

如果因为HTML结构限制没法用:nth-child()，我给你做一个符合要求的替代方案：900px容器内居中放置3个带按钮的图片，图片间保留内边距。

HTML结构 #

<div class="image-container">
  <div class="image-item">
    <img src="https://via.placeholder.com/200" alt="示例图片1">
    <a href="#" class="image-btn">按钮1</a>
  </div>
  <div class="image-item">
    <img src="https://via.placeholder.com/200" alt="示例图片2">
    <a href="#" class="image-btn">按钮2</a>
  </div>
  <div class="image-item">
    <img src="https://via.placeholder.com/200" alt="示例图片3">
    <a href="#" class="image-btn">按钮3</a>
  </div>
</div>

CSS代码 #

/* 900px容器，水平居中 */
.image-container {
  width: 900px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between; /* 让图片均匀分布在容器内 */
  padding: 20px 0;
  box-sizing: border-box;
}

/* 图片项样式，设置内边距实现图片间的间隔 */
.image-item {
  text-align: center;
  padding: 0 15px; /* 左右内边距，控制图片间的距离 */
}

/* 图片自适应样式 */
.image-item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 10px;
}

/* 按钮样式，复用你原有的设计风格 */
.image-btn {
  display: inline-block;
  padding: 8px 20px;
  background-color: #543D91;
  color: #fff;
  text-decoration: none;
  border-radius: 99em;
  border-bottom: 1px solid #fff;
}

这个方案用Flexbox实现了灵活的布局，图片和按钮都能自适应，纯CSS+HTML就能在JSFiddle里正常运行。

内容的提问来源于stack exchange，提问作者T. Heuerman