你可以使用一个card类添加到所有的卡片中，在上面添加共享样式，如下所示：

.card{
    border-radius: .5rem;
    padding: 2.5rem 3rem;
    margin-bottom: 3rem;
    box-shadow: 0 1rem 2rem .5rem #dedede;
    border-top: .5rem solid hsl(180, 62%, 55%);
}
.card-supervisor {
    border-color:hsl(180, 62%, 55%);
}

.card-team-builder {
    border-color: hsl(0, 78%, 62%);
}

.card-karma {
   border-color: hsl(34, 97%, 64%);
}

.card-calculator {
   border-color:hsl(212, 86%, 64%);
}

<section class="cards">
        <div class="card card-supervisor">
          <h1 class="card-title">Supervisor</h1>
          <p class="card-paragraph">Monitors activity to identify project roadblocks</p>
          <div class="card-image">
            <img src="images/icon-supervisor.svg">
          </div>
        </div>
    
        <div class="card card-team-builder">
          <h1 class="card-title">Team Builder</h1>
          <p class="card-paragraph">Scans our talent network to create the optimal team for your project</p>
          <div class="card-image">
            <img src="images/icon-team-builder.svg">
          </div>
        </div>
        
        <div class="card card-karma">
          <h1 class="card-title">Karma</h1>
          <p class="card-paragraph">Regularly evaluates our talent to ensure quality</p>
          <div class="card-image">
            <img src="images/icon-karma.svg">
          </div>
        </div>
    
        <div class="card card-calculator">
          <h1 class="card-title">Calculator</h1>
          <p class="card-paragraph">Uses data from past projects to provide better delivery estimates</p>
          <div class="card-image">
            <img src="images/icon-calculator.svg">
          </div>
        </div>
      </section>

使用包含公共属性的所有类的选择器（使用逗号列出所有类），然后使用颜色的单独规则

.card-supervisor, .card-team-builder, .card-karma, .card-calculator {
    border-radius: .5rem;
    padding: 2.5rem 3rem;
    margin-bottom: 3rem;
    box-shadow: 0 1rem 2rem .5rem #dedede;
    border-top: .5rem solid hsl(180, 62%, 55%);
}

.card-supervisor {
  background: blue;
}
.card-team-builder {
  background: red;
}
.card-karma {
  background: yellow;
}
.card-calculator {
  background: green;
}

您可以选择多个类，以逗号分隔

.card-supervisor,
.card-team-builder,
.card-karma,
.card-calculator {
  border-radius: 0.5rem;
  padding: 2.5rem 3rem;
  margin-bottom: 3rem;
  box-shadow: 0 1rem 2rem 0.5rem #dedede;
}
.card-supervisor {
  border-top: 0.5rem solid hsl(180, 62%, 55%);
}

.card-team-builder {
  border-top: 0.5rem solid hsl(0, 78%, 62%);
}

.card-karma {
  border-top: 0.5rem solid hsl(34, 97%, 64%);
}

.card-calculator {
  border-top: 0.5rem solid hsl(212, 86%, 64%);
}

由于所有的卡有他们的大部分属性是相同的，你可以创建一个全局.card类和创建类修饰符为每一种卡你有
您可以了解有关

1. OOCSS面向对象CSS
2. SMACSS
3. BEM块、元素、修饰符

.card {
      border-radius: .5rem;
    padding: 2.5rem 3rem;
    margin-bottom: 3rem;
    box-shadow: 0 1rem 2rem .5rem #dedede;
}

.card-supervisor {
    border-top: .5rem solid hsl(180, 62%, 55%);
}

.card-team-builder {
    border-top: .5rem solid hsl(0, 78%, 62%);
}

.card-karma {
    border-top: .5rem solid hsl(34, 97%, 64%);
}

.card-calculator {
    border-top: .5rem solid hsl(212, 86%, 64%);
}

<section class="cards">
  <div class="card card-supervisor">
    <h1 class="card-title">Supervisor</h1>
    <p class="card-paragraph">Monitors activity to identify project roadblocks</p>
    <div class="card-image">
      <img src="images/icon-supervisor.svg">
    </div>
  </div>

  <div class="card card-team-builder">
    <h1 class="card-title">Team Builder</h1>
    <p class="card-paragraph">Scans our talent network to create the optimal team for your project</p>
    <div class="card-image">
      <img src="images/icon-team-builder.svg">
    </div>
  </div>

  <div class="card card-karma">
    <h1 class="card-title">Karma</h1>
    <p class="card-paragraph">Regularly evaluates our talent to ensure quality</p>
    <div class="card-image">
      <img src="images/icon-karma.svg">
    </div>
  </div>

  <div class="card card-calculator">
    <h1 class="card-title">Calculator</h1>
    <p class="card-paragraph">Uses data from past projects to provide better delivery estimates</p>
    <div class="card-image">
      <img src="images/icon-calculator.svg">
    </div>
  </div>
</section>

如果你想添加一组通用的css代码到第。类中，添加它们时用逗号分隔，如下所示。

.card-supervisor, .card-team-builder, .card-karma, .card-calculator {
    border-radius: .5rem;
    padding: 2.5rem 3rem;
    margin-bottom: 3rem;
    box-shadow: 0 1rem 2rem .5rem #dedede;
}

但是要记住你可以在一个html元素中添加一个以上的类，所以最好的做法是用一个公共类添加公共代码，用另一个类或id添加唯一的css，如下所示

<div class="card-item card-supervisor">

CSS

.card-list{
    border-radius: .5rem;
    padding: 2.5rem 3rem;
    margin-bottom: 3rem;
    box-shadow: 0 1rem 2rem .5rem #dedede;
}
.card-supervisor {
    border-top: .5rem solid hsl(180, 62%, 55%);
}