Question

我正在循环中创建一系列jQuery复选框，如下所示：

var checkbox = $('<input>').attr({type: 'checkbox', id: checkbox_id);
panel.append(checkbox);
panel.append($('<label>').attr({for: checkbox_id}).html(checkbox_name);
checkbox.button();

我有一个名为my-style的css类，用于定义border-radius，padding和line-height等内容。我希望my-style仅覆盖我创建的复选框，覆盖jQuery主题定义的属性。

我尝试了checkbox.addClass("my-style");和panel.find(".ui-button-text").addClass("my-style")，但都没有正常工作。某些css属性会覆盖jQuery的默认值，例如border-radius，而其他css属性似乎无法像line-height和padding那样被覆盖。我甚至试图通过panel.find(".ui-button-text").css("line-height", 1.0);直接强制执行css属性，但这根本不起作用。

我明白我可以通过更改那里的css代码直接修改jQuery主题，但这样做会影响所有按钮，这不是我想做的。

更新：

我设法解决此问题的一种方法是直接指定style标记。所以上面的代码变成了：

var checkbox = $('<input>').attr({type: 'checkbox',
                                  id: checkbox_id});
panel.append(checkbox);
var label = $('<label>').attr({for: checkbox_id,
                               style: "font-size: 0.6em; border-radius: 0px; margin-right: 0.3em;"}).text(checkbox_name);
panel.append(label);
checkbox.button();
label.children().attr("style", "padding: 0.2em 0.4em;");

虽然这个解决方案有效，但令人讨厌，因为我将JavaScript和CSS代码混合在一起。

通过写入style属性，我可以覆盖jQuery UI的CSS。这里讨论的一件事是使用更具体的CSS选择器，它们将比jQuery UI的CSS类更重要。更具体的选择器将具有复选框的ID。这种方法的问题是复选框是动态生成的，因此复选框ID也是如此。因此，根据我的理解，拥有更具体的CSS选择器是不可行的。

Answer 1

该类未应用于该元素的问题，或该类未执行您希望它执行的操作的问题？

如果是后者，你可以粘贴你班级的css代码吗？

Answer 2

听起来你的CSS选择器不够具体，你有两个选择

讨厌并声明你的CSS属性，重要的是覆盖其他任何选择的
编写更具体的CSS选择器

后者是更好的选择，因为您可以在稍后阶段更好地控制您的样式。如果您对CSS选择器不太了解，请阅读本文（http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html），这应该有助于理解编写更具体的选择器和每个选择器类型的值

修改动态创建的jQuery复选框按钮的css

2 个答案: