如何将css类添加到jquery selectable答案

【问题标题】：How to add a css class to jquery selectable如何将css类添加到jquery selectable
【发布时间】：2014-07-21 10:14:45
【问题描述】：

在项目中使用可选择的 jquery。代码如下：

<li class="ui-widget-content">

.selectable li {
            margin: 1px;
            padding: 0.4em;
            height: 0.52em;
            line-height: 0.54em;
            position: relative;
            cursor: default;                               
        }

我想要做的是在某些条件下动态地为 li 添加一个边距

<li class="ui-widget-content groups">



.groups {
        padding-right: 10px;
    }

这行不通。如果我添加 padding-right: 10px;在 .selectable li 中，添加了填充。但是就像我说的那样，将填充添加为额外的类时它不起作用，这就是我需要做的，以便有时有填充，有时不取决于某些条件。

当查看浏览器检查器时，我可以看到 jquery 还添加了一个额外的类“ui-selectee”：

<li class="ui-widget-content groups ui-selectee" >

也尝试过像这样先添加额外的类：

<li class="groups ui-widget-content">

女巫渲染

<li class="groups ui-widget-content ui-selectee" >

也不行。

在检查器中，.groups 类没有被交叉。

有人知道为什么添加类不添加填充吗？

【问题讨论】：

标签： jquery css jquery-ui jquery-ui-selectable

【解决方案1】：

我猜 jquery selectable 会覆盖您的样式，因为 .selectable li 已经包含 0.4em 的填充。所以尝试使用这段代码：

.groups {
        padding-right: 10px !important;
    }

【讨论】：

【解决方案2】：

只需在 CSS 规则中添加额外的类，即可提高类的“价值”。例如：

.ui-widget-content.groups{
    padding-right: 10px;
}

或

.ui-widget-content.ui-selectee.groups{
    padding-right: 10px;
}

避免在你的 CSS 中使用!important，因为它可能会在未来引起很多问题。您可以了解如何计算 CSS 特异性的规则here。

【讨论】：