如何编辑我店铺首页的产品卡片？

Question

我在家里看到的所有产品卡片并不都一样，例如一个标题比另一个标题长，而且卡片的尺寸也不完全相同。

我尝试从 css 的角度编辑它们，但它编辑了所有这些，所以我不想这样做。

Answer 1

<div class="product-card" id="product1">
  <!-- Content for product 1 -->
</div>

<div class="product-card" id="product2">
  <!-- Content for product 2 -->
</div>

<!-- Add more product cards as needed -->

.product-card {
  /* Common styles for all product cards */
  /* For example: */
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px;
}

/* Styles for specific product cards */
#product1 {
  /* Styles specific to product 1 */
  /* For example: */
  background-color: #f0f0f0;
}

#product2 {
  /* Styles specific to product 2 */
  /* For example: */
  background-color: #e0e0e0;
}

在此示例中，每个产品卡都有一个公共类（产品卡）和一个唯一标识符（id），允许您在 CSS 中定位特定卡。您可以单独自定义每个产品卡的样式，而不影响其他产品。

根据您的要求调整特定产品卡部分内的样式。这样，您可以为每个产品卡设置不同的标题长度、大小或其他样式变化。