00024.【CSS】类选择器的简单使用2



<template>

  <div class="notebox">
    This is an informational note.
  </div>

  <div class="notebox warning">
    This note shows a warning.
  </div>

  <div class="notebox danger">
    This note shows danger!
  </div>

  <div class="danger">
    This won't get styled — it also needs to have the notebox class
  </div>

</template>

<script setup>

</script>

<style scoped>

.notebox {
  border: 4px solid #666;
}

.notebox.warning {
  border-color: orange;
  font-weight: bold;
}

.notebox.danger {
  border-color: red;
  font-weight: bold;
}

</style>