css - 如何在不设置文本样式的情况下更改 Dojo 按钮的大小？

Question

我是 Dojo 和 CSS 的新手，所以我可能在这里遗漏了一些明显的东西。

我有一个页面，其中包含多个以编程方式创建的 Dijit 按钮，我想将其中一个按钮变大 - 保留文本并增加文本与按钮边缘之间的间距。我不想为此覆盖 .dijiButtonNode 的 CSS，因为页面中还有其他 Dijit 按钮不应更改。

我尝试将其添加到小部件声明中:

style: { padding: "1em" }

还有这个:

class: "PaddedButton"

.PaddedButton
{
    padding: 1em;
}

但由于 Dijit 按钮呈现为嵌套 span，因此它会填充按钮周围的区域。

Answer 1

使用 CSS 的最佳方式是使用一种浏览器调试工具(您应该已经在使用)，例如 Firebug 或 Chrome 开发人员工具。您可以使用 inspect_element 轻松找到元素的 DOM 节点，然后直接编辑它的 CSS 样式，直到它们符合您的要求。您还可以查看哪些 CSS 规则处于事件状态以及哪些被忽略或覆盖。

我在这里想出了一个工作示例: http://jsfiddle.net/missingno/FrYdx/2/

重要的部分是下面的 CSS 选择器:

.paddedButton.dijitButton .dijitButtonNode {
    padding: 1em;
}

这会选择任何具有类 dijitButtonNode 的节点，该节点从具有 paddedButton 和 dijitButton 类的节点派生。我不能只做一个 .paddedButton .dijitButtonNode，因为这样规则最终会被更具体的选择器级联。