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

【问题标题】：Override JQuery class selector with css class selector用 css 类选择器覆盖 JQuery 类选择器
【发布时间】：2013-03-04 14:13:52
【问题描述】：

我有下一个 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 选择器，它会起作用，但我会尽量不那么具体。谢谢

【问题讨论】：

我假设您使用的是 jQuery Mobile？
您是否尝试将 !important 添加到 .PersonDetailsUla

标签： jquery css jquery-selectors css-selectors

【解决方案1】：

创建一个新的 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" />

【讨论】：

【解决方案2】：

你试过!important吗？

padding: 10px !important;

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

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

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

【讨论】：

!important 是睡觉的习惯——我尽量避免使用它。我尝试过使用您的第二个建议，但没有奏效
在这种情况下，您只能使用更具体的选择器（如我的示例），或者，如果您有其他样式表，请确保最后加载最重要的样式表。