Html CSS为类和id交替绘制

我制定了一个循序渐进的教学计划。最终会有很多选择，按钮，方式。。但目前我正在尝试将不活动的按钮涂成红色。但是css与“类”相连。如何使“id”的优先级高于用于文本格式化的“类”

/*钮扣*/
#msform.action按钮{
宽度：100px；
背景：#27AE60；
字体大小：粗体；
颜色：白色；
边界：0无；
边界半径：1px；
光标：指针；
填充：10px 5px；
利润率：10px 5px；
}
#红色{
背景色：红色；
}

您可以使用相同的选择器并附加您的ID

#msform .action-button#red { 
  background-color: red;
}

尽管您应该使用类，因为您只能在页面上使用一次ID。将您的HTML和CSS更新为

<input type="button" name="coughyes" class="red next action-button" value="Yes">
<input type="button" name="coughno" class="red next action-button" value="No">

#msform .action-button.red { 
  background-color: red;
}

#msform.action-button.red{
背景色：红色；
}

---

更新了你的小提琴

或者如果你想保留相同的标记，你可以简单地更改背景颜色：红色至<代码>背景色：红色！重要的

@Wanarka您还应该看看浏览器如何决定应用哪条规则谢谢！

<input type="button" name="coughyes" class="red next action-button" value="Yes">
<input type="button" name="coughno" class="red next action-button" value="No">

#msform .action-button.red { 
  background-color: red;
}