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

Question

我是Dojo和CSS的新手，所以也许我错过了一些明显的东西。

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

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

style: { padding: "1em" }

和此：

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