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

最新推荐文章于 2025-10-08 10:01:24 发布

原创最新推荐文章于 2025-10-08 10:01:24 发布 · 939 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端 #vue

收录于

该文章展示了一个HTML模板，其中包含一个使用CSSflex布局的示例。`.chart-box`是一个flex容器，其子元素`.item-box`以等间距排列。每个`.item-box`有固定宽度和高度，并用不同颜色（lightgreen,lightskyblue,lightcoral）区分背景。

<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>

.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;
  }
}