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

Question

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

我有一个页面，其中有几个以编程方式创建的 Dijit 按钮，我想将其中一个按钮放大 - 保留文本并增加文本和按钮边缘之间的空间。我不想覆盖 .dijiButtonNode 的 CSS 来执行此操作，因为页面上还有其他不应更改的 Dijit 按钮。

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

style: { padding: "1em" }

和 this:

class: "PaddedButton"

.PaddedButton
{
    padding: 1em;
}

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

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 因为这样规则最终会被更具体的选择器级联。