1

我有一些如下所示的 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; }

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

4

2 回答 2

1

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

.ui-widget input.monospace
于 2013-01-14T21:33:06.227 回答
0

你可以像@Max 说的那样做，ui-widget input.monospace{}或者你可以添加!important到你的.monospace班级。

.monospace{ font-family: Lucida Console, Courier New, monospace !important;}
于 2013-01-14T21:33:40.343 回答