CSSクラスセレクタの子

Question

カスタムクラスの子孫に対してのみスタイルを適用できますか？私は、DOM要素の子孫のjQuery UIスタイルをオーバーライドしたいと思います。 :(私は子供セレクタ（>）を試みたが、それは最初のレベルで停止し

.myStuff .ui-button {font-size: 0.7em !important;} 

<div class="myStuff"> 
    <input type="button"></input> !-- jQuery UI class .ui-button 
</div> 

<input type="button"></input> !-- .ui-button not effected by my .ui-button style 

よう

何か。私は実際にスペースをダブルクラスの構文が正しいものだと思いました... 。それはどちらか動作しません

をこれらは私がjQueryのUIから上書きしようとしている正確なセレクタですが、私は本当にただ、フォントサイズを変更したい

.ui-widget { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1.1em/*{fsDefault}*/; } 
.ui-widget .ui-widget { font-size: 1em; } 
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1em; } 
.ui-widget-content { border: 1px solid #aaaaaa/*{borderColorContent}*/; background: #ffffff/*{bgColorContent}*/ url(images/ui-bg_flat_75_ffffff_40x100.png)/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/; color: #222222/*{fcContent}*/; } 
.ui-widget-content a { color: #222222/*{fcContent}*/; } 
.ui-widget-header { border: 1px solid #aaaaaa/*{borderColorHeader}*/; background: #cccccc/*{bgColorHeader}*/ url(images/ui-bg_highlight-soft_75_cccccc_1x100.png)/*{bgImgUrlHeader}*/ 50%/*{bgHeaderXPos}*/ 50%/*{bgHeaderYPos}*/ repeat-x/*{bgHeaderRepeat}*/; color: #222222/*{fcHeader}*/; font-weight: bold; } 
.ui-widget-header a { color: #222222/*{fcHeader}*/; } 

...私はみますcaまであなたの例ごとにそれを計算しますが、私は昨日どんな運もなかった:(。

Answer 1

あなたはCSSがうまくいきますが、それはうまくいくはずですが、私はあなたがCSS specificityの犠牲者かもしれないと信じています。 jQuery UIスタイルシートファイルを開くと、上書きしたいCSSルールのセレクタがCSSルールよりも具体的であることがわかり、優位性があり、ルールに優先して使用されることがわかります。

これを上書きできるようにするには、jQuery UIで提供されるルールよりも優れた独自のCSSルールを追加する必要があります。

更新

私たちは、セレクタは、我々が上書きしたいルールを探す方法がわからないため、この場合には、ルールを無効にする方法の正確な例を与えることは困難です。しかし、一般的な考え方は、上書きしたいルールの特異性を計算しなければならないということです（上にリンクされたSmashing Magの記事を参照してください）、ルールの特異性があなたが上書きしたいルールの特異性。これを達成するにはいくつかの方法があります。たとえば、セレクタにクラスやIDを追加するなどです。

jQuery UIスタイルシートを開いて、使用する正確なセレクタをコピーし、セレクタを使用して、.myStuffクラスの前に追加するルールを見つけ出すのが最も簡単な方法ですjQuery UIが提供するよりも具体的なルールを持つ必要があります。

また、この問題を解決するために!importantを使用することは推奨されません。これは私の個人的な意見ですが、！importantを使用し始めると、後でCSSを修正しようとすると、後で痛みの世界に入り込む可能性があります。重要なルールを指定してCSSの通常の流れを壊すと、レイアウトの問題を解決するのが難しい場合があります。

Answer 2

はい、あなたの例が有効です。

.myStuff .ui-button {some custom style} 

ただし、domをChromeの開発ツール（またはFFまたはIE）でチェックして、正しいセレクタを使用していることを確認してください。 jQuery UIは、さまざまなウィジェットのための多くのdom要素を追加できます。