CSS 样式——同级多个相同标签不同样式

<template> 中的代码:

<template>
  <div class="chart-box">
    <div class="item-box">A</div>
    <div class="item-box">B</div>
    <div class="item-box">C</div>
  </div>
</template>

<style> 中的代码:

.chart-box {
  display: flex;
  justify-content: space-around;
  .item-box {
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
  }
  .chart-box div:nth-child(1) {
    background-color: lightgreen;
  }
  .chart-box div:nth-child(2) {
    background-color: lightskyblue;
  }
  .chart-box div:nth-child(3) {
    background-color: lightcoral;
  }
}

猜你喜欢

转载自blog.csdn.net/cdd9527/article/details/128965996