0

次の HTML コードがあります。

<ul data-role="listview" style="margin-top: 0;">
   <li>
      <a  data-bind="attr: {href: 'tel:' + person().officePhone}">
            <img class="PersonDetailsUlImage" src="/view/mobile/images/Icon_phone_36x36_drkgry.png" />
            <h6>Office</h6>
            <p data-bind="text: person().officePhone"></p>
      </a>
   </li>
</ul>

CSS ファイルで、次のコードのように「PersonDetailsUla」クラスを設定しました。

.PersonDetailsUla 
{
    padding: 0 0 0 50px;
}

PersonDetailsUla スタイルが機能しているかどうかを確認しようとすると、Jquery が別のクラスをオーバーライドして適用していることがわかります。

Class="PersonDetailsUla ui-link-inherit"

ui-link-inherit のパディングをオーバーライドするオプションはありますが、可能な限り具体的ではありませんか? ID セレクターを使用する場合は動作しますが、できるだけ具体的でないようにしています。ありがとう

4

2 に答える 2

0

試しました!importantか？

padding: 10px !important;

または、次のように、もう少し具体的なセレクターを使用することもできます。

.PersonDetailsUla.ui-link-inherit {
    padding: 10px;
}

これにより、「personDetails」クラスと「ui-link-inherit」クラスの両方を持つすべての要素が選択されますが、ID を使用するほど具体的ではありません。

于 2013-03-04T14:20:52.280 に答える
0

新しい css ファイルを作成し、それをjquery css ファイルの後に含め、カスタム スタイルシートでスタイルを定義して、jquery ui スタイルをオーバーライドします。そう：

<!-- jQuery stylesheet-->
<link href="/Content/Styles/jquery-ui-1.8.14.css" media="screen" rel="Stylesheet" type="text/css" />
<!-- Your own custom stylesheet-->
<link href="/Content/Styles/Custom.css" media="screen" rel="Stylesheet" type="text/css" />
于 2013-03-04T14:31:31.750 に答える