JQueryのUIタブからスタイルをオーバーライドするにはどうすればよいですか？

Question

私はJQuery UI（1.12）でJQuery 1.12を使用しています。私は、しかし、唯一の特定の小型モバイルブラウザで、各タブに挿入されたパディングを上書きしたいので、私は、

@media only screen and (max-width: 400px) { 
    .ui-tabs .ui-tabs-nav { 
     margin: 0px; 
    } 
    .ui-tabs .ui-tabs-nav .ui-tabs-anchor { 
     padding: .5em .5em; 
    } 
} 

しかし、私のCSSでこれを定義し、私は（MacのChromeのモバイルブラウザエミュレータ上で自分のページをロードするとき私が見るものの、基本的にMacのChromeが）、私のスタイルは、デフォルトのクラスは、私はSOに適切にそれをコピーする方法を見つけ出すことはできません

.ui-tabs .ui-tabs-nav .ui-tabs-anchor { 
float: left; 
padding: .5em 1em; 
text-decoration: none; 
} 

@media only screen and (max-width: 400px) 
.ui-tabs .ui-tabs-nav .ui-tabs-anchor { 
    padding: .5em .5em; 
} 

...私のクラスに優先を取っているTEH insepctorに含まれますがあります「パディング：.5em .5em;」を越えるストライクライン。メディアセクションで、オーバーライドされたことを示します。 UIタブのCSS定義を優先させるにはどうすればよいですか？

Answer 1

!imporantの使用はhighly discouragedです。この場合には特異性をステップアップする適切な方法は、の線に沿って次のようになります。私はulとaセレクタと特異性を高めています

@media only screen and (max-width: 400px) { 
    .ui-tabs ul.ui-tabs-nav { 
     margin: 0px; 
    } 
    .ui-tabs ul.ui-tabs-nav a.ui-tabs-anchor { 
     padding: .5em .5em; 
    } 
} 

。他のものは公式の文書にリンクしていますが、私はこれを行うための無数の方法があることを繰り返し述べたいと思います。すべてのルールの先頭にhtmlまたはbodyセレクタを追加するなど、簡単に何かを汎用することができます。

@media only screen and (max-width: 400px) { 
    body .ui-tabs .ui-tabs-nav { 
     margin: 0px; 
    } 
    body .ui-tabs .ui-tabs-nav .ui-tabs-anchor { 
     padding: .5em .5em; 
    } 
} 

Answer 2

これはそれを行います。

@media only screen and (max-width: 400px) { 
    .ui-tabs .ui-tabs-nav { 
    margin: 0px !important; 
    } 
    .ui-tabs .ui-tabs-nav .ui-tabs-anchor { 
    padding: .5em .5em !important; 
    } 
} 

http://www.standardista.com/css3/css-specificity/は、より詳細に特異性を説明したが、重要な宣言は、標準スタイルをアウトに指定されますので、上記のコードは動作します！。

Answer 3

!importantを使用すると、非常に醜い悪い考えです！ 次のように入力してください：

@media only screen and (max-width: 400px) { 
    .ui-tabs.ui-tabs ul.ui-tabs-nav { 
     margin: 0px; 
    } 
    .ui-tabs.ui-tabs ul.ui-tabs-nav a.ui-tabs-anchor { 
     padding: .5em .5em; 
    } 
} 

これにより、CSS構文の優先順位が高くなります。