Question

我在CSS中定义了卡片。在CSS中分配背景色会使每张卡具有相同的颜色。如何制作这两张背景颜色不同的卡？有任何内联解决方案吗？

/* Float four columns side by side */
.column {
  float: left;
  width: 25%;
  padding: 0 10px;
}

.card {
  padding: 16px;
  text-align: center;
  background-color: #ffff00;
}

  </div><div class="row">
  <div class="column">
    <div class="card">
      <h3>Card 1</h3>
      <p>Some text</p>
      <p>Some text</p>
    </div>
  </div>

  <div class="column">
    <div class="card">
      <h3>Card 2</h3>
      <p>Some text</p>
      <p>Some text</p>
    </div>

Answer 1

有百万种方法可以做到。这是一个（我在其中之一中添加了“ othercard”类）。

/* Float four columns side by side */
.column {
  float: left;
  width: 25%;
  padding: 0 10px;
}

.card {
  padding: 16px;
  text-align: center;
  background-color: #ffff00;
}

.othercard {
  background-color: #00ff00;
}

  </div><div class="row">
  <div class="column">
    <div class="card">
      <h3>Card 1</h3>
      <p>Some text</p>
      <p>Some text</p>
    </div>
  </div>

  <div class="column">
    <div class="card othercard">
      <h3>Card 2</h3>
      <p>Some text</p>
      <p>Some text</p>
    </div>

如何更改单个卡的背景颜色？

1 个答案: