0

jQuery UI スライダー ウィジェットのハンドルを狭めようとしています。このCSSを作成しました：

.ui-slider-handle {
    width: 10px;
}

DOM インスペクターが私に言ったことは、jQuery UI CSS を支持して無視されています。

どうすれば自分の優先順位を高くすることができますか? スライダー ハンドルを識別する唯一の方法は、jQuery 関数 (.slider()) によって作成され、実際には .html ファイルにはないため、jQuery で作成した後にコードを使用して ID を割り当てることです。次に、CSS が適用されることを期待するか、幅属性をコードで手動で追加します。これらはエレガントではないようです。

最善の方法は何ですか？

4

2 に答える 2

3

has more があるため、jQuery UI の CSS によってオーバーライドされていますspecificity。彼らが持っているコードを見ると、もっと必要なだけで、それを上書きします。

html body .ui-slider .ui-slider-handle {} 
/* the added points from html & body, will trump jQuery UI's rule */

Using!importantもこれを処理しますが、本当にそれを回避する方法がない限り、通常は使いたくないものと言われています。例としては、要素にインライン スタイルがあり、スタイル シートでそれらを無効にしたい場合があります。インライン スタイルには1000ポイントが与えられますが、これを超えることは不可能です。

ここで詳細を読むhttp://css-tricks.com/specifics-on-css-specificity/

于 2013-03-12T20:22:43.453 に答える
0

十分に努力すれば、独自の CSS で JQuery または JQueryUI のデフォルト スタイルを手動でオーバーライドできます。ただし、これを行うにはいくつかの問題があります。

  • あなたが発見したように、カスケードはデフォルトの CSS を (おそらく驚くべき) 方法で優先させるので、スタイルが JQuery を「打ち負かす」ことを確実にするため!importantに、セレクターで のようなハックや冗長なタグを使用する必要があります。html body
  • さらに問題となるのは、多くのウィジェット (Menu が主な違反者ですが (他にもあります)) は、初期化時に新しいセレクターを動的に作成することです。これらのスタイルをオーバーライドするには、JS を作成した後で Firebug または同様のツールをページで使用して、新しいセレクター名を見つけ出し、スタイル シートにも追加する必要があります。

正しい方法は、ThemeRollerツールを使用して、すべてのスタイルを一度に変更する単一のカスタム CSS「バンドル」を作成することです。ボーナス: カスタム スタイルがすべてのウィジェットに同時にどのように影響するかを確認できるため、ページの統一された外観を簡単に作成できます。

于 2013-03-13T19:35:54.873 に答える