如何对同一元素应用多重效果

<div class="box red-border blue-background">您的内容</div><style>
.red-border {
  border: 2px solid red;
}
.blue-background {
  background-color: blue;
}
</style>

<div class="box">您的内容</div><style>
.box {
  border: 2px solid red;
}
.box:hover {
  background-color: blue;
}
</style>

<div class="box">您的内容</div><style>
.box {
  border: 2px solid red;
}
.box {
  background-color: blue !important;
}
</style>

<div class="box">您的内容</div><style>
.box {
  --border-color: red;
  --background-color: blue;
  border: 2px solid var(--border-color);
  background-color: var(--background-color);
}
</style>