Question

在项目中使用可选择的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类。

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

Answer 1

我猜jquery selectable会覆盖你的风格.selectable li已经包含0.4em的填充。所以尝试使用此代码：

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

Answer 2

只需在css规则中添加其他类，即可提高班级的“价值”。例如：

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

或

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

避免在CSS中使用!important，因为它可能会在将来导致很多问题。您可以学习如何计算CSS特异性的规则here。

如何将css类添加到jquery selectable

2 个答案: