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 クラスが適用されているにもかかわらず、2 つの html 入力要素が最初のスタイルを取得します。.monospace クラスが適用されていない限り (html の例の最初の 2 つの入力項目のように)、最初のスタイルをページのすべての入力に適用する必要があり、その場合は 2 番目のスタイルを適用します。私はこれを正しく行っていないことを認識しており、解決策はおそらく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 に答える