JqueryモバイルCSSクラスリンク

Question

私はJQuery MobileでモバイルWebアプリケーションを作成しています。今、私はいくつかの種類のナビゲーションメニューを持っています。ここにHTMLがあります

<ul data-role="listview"> 
    <li data-icon="arrow-u"><a href="#top" class="top" data-ajax="false">Top</a></li> 
    <li><a href="~PROBE(201)~" data-transition="slide">Menu</a></li> 
    <li><a href="~PROBE(208)~" data-transition="slide">Contacten</a></li> 
    <li><a href="~PROBE(206)~" data-transition="slide">Klanten</a></li> 
    <li><a href="~PROBE(207)~" data-transition="slide">Planning</a></li> 
</ul> 

ここで、最初のlistItemを右側にします。だから、私はCSSクラス 'top'を作った。

.top{ 
    text-align:right; 
    padding-right:35px; 
} 

しかし、何らかの理由でこのCSSクラスを取っていない。誰でも助けることができますか？

Answer 1

は、試してみてください。

ul li a.top{ 
    text-align:right; 
    padding-right:35px; 
} 

ORなど：

ul li:first-of-type a{ 
    text-align:right; 
    padding-right:35px; 
} 

Answer 2

のaには、topクラスを適用しています。

更新

あなたのスタイリングが上書きされますと、あなたはそれをオーバーライドするルールの特異性よりも高くなるまで、あなたのセレクタのCSS-specificityを増やす必要があります。私はあなたのDOMの多くを知らないので、私が与えることができる最高のものは次のとおりです：

ul li.top{ 
    text-align:right; 
    padding-right:35px; 
} 

しかし、それは十分ではないかもしれません。 CSS特異性に関する記事を見ると、特異性を計算する方法の一部があります。

Answer 3

私は特定の場合には上書きは少しトリッキーであることを発見しました。このようなことをしなければならないかもしれません。一部のブラウザのモバイルモバイル&は、予想したとおりに上書きを取得していません。最終結果自分のスタイルが適用されることを確認するために重要なことを使わなければなりません。これと場所をどのように使用するかをちょうど注意してください。

ul li.top{ 
    text-align:right !important; 
    padding-right:35px !important; 
}