CSS容器名称精确匹配样式查询实例页面

CSS代码：

.card, .toast {
  display: inline-flex;
  :where(.status) {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    width: 100px;
    background-color: aliceblue;
  }
}
.card {
  container-name: card;
  .status {
    aspect-ratio: 1 / 2;
  }    
}
.toast {
  container-name: toast;
  .status {
    aspect-ratio: 2.5;
  }    
}
@container card style(--status: success) {
  .status {
    background-color: green;
  }
}
@container toast style(--status: success) {
  .status {
    background-color: #000;
    &::after {
      content: '√';
      margin-left: .5ch;
    }
  }
}

HTML代码：

<section class="card" style="--status: success;">
  <div class="status">卡片成功</div>
</section>
<section class="toast" style="--status: success;">
  <div class="status">提示成功</div>
</section>