添加一个将覆盖现有字体规则的css类

Question

我有一些html如下所示：

<div id="main" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
  <div id="main-top">
    <select id="entity" name="entity" class="monospace" >
    <input id="client" type="text" name="client" class="monospace">
  </div>
  <!-- Rest of the page content -->
  ...
</div>

我有一些看起来像这样的CSS：

.ui-widget input { font-family:Lucida Sans Unicode,Verdana,Arial,sans-serif; }
.monospace{ font-family: Lucida Console, Courier New, monospace; }

当我运行它时，两个html输入元素拾取第一个样式，尽管已经应用了.monospace类。我希望第一个样式应用于页面上的所有输入，除非应用.monospace类（如html示例中的前两个输入项），在这种情况下，我希望应用第二个样式。我意识到我没有正确地解决这个问题，解决方案可能需要以不同的方式构建我的css，有关如何实现这一点的任何建议吗？

Answer 1

您需要使用更具体的选择器，例如：

.ui-widget input.monospace

Answer 2

您可以按照@Max说的那样做，ui-widget input.monospace{}或者您可以将!important添加到.monospace课程。

.monospace{ font-family: Lucida Console, Courier New, monospace !important;}