Question

我有下一个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文件中，我设置了我的＆＃34; PersonDetailsUla＆＃34;类似下一个代码：

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

当我尝试查看我的PersonDetailsUla样式是否正常工作时，我看到Jquery正在覆盖并应用另一个类：

Class="PersonDetailsUla ui-link-inherit"

是否有任何选项可以覆盖ui-link-inherit的填充但尽可能不具体？如果我将使用ID选择器它将工作，但我尽量不那么具体。感谢

Answer 1

您是否尝试过!important？

padding: 10px !important;

或者，您也可以使用稍微更具体的选择器，如下所示：

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

这将选择同时具有“personDetails”和“ui-link-inherit”类的所有元素，但它不像使用ID那样具体。

Answer 2

创建一个新的css文件并在之后添加 jquery css文件，并在自定义样式表中定义样式以覆盖jquery ui样式。所以：

 <link href="/Content/Styles/jquery-ui-1.8.14.css" media="screen" rel="Stylesheet" type="text/css" />  <link href="/Content/Styles/Custom.css" media="screen" rel="Stylesheet" type="text/css" />

用css类选择器覆盖JQuery类选择器

2 个答案: