在我的一个项目中，我需要扩展jQuery-UI图标的图标调色板。我需要稍大（22x22）和丰富多彩的。扩展jQuery-UI的图标
所以我看了看jQuery-UI如何创建图标，并对我的图标做了同样的操作。我希望我的“扩展名”尽可能使用jQuery-UI-ish，所以我开始重写一些css类。我的想法是
<div class="ui-rw-icon">
<span class="ui-icon ui-icon-pencil"></span>
</div>
使用ui-rw-icon（或ui-rw-icon-color的彩色图标）类包装jQuery的UI与我可以控制的CSS行为图标类。我的css文件具有以下内容：
.ui-rw-icon .ui-icon {
width: 22px;
height: 22px;
background-image: url(images/ui-rw-icons_grayscale_246x246.png);
}
.ui-state-default .ui-rw-icon .ui-icon { background-image: url(images/ui-rw-icons_grayscale_pale_246x246.png); }
.ui-state-hover .ui-rw-icon .ui-icon { background-image: url(images/ui-rw-icons_grayscale_246x246.png); }
.ui-rw-icon-color .ui-icon { width: 22px; height: 22px; background-image: url(images/ui-rw-icons_color_246x246.png); }
.ui-state-default .ui-rw-icon-color .ui-icon { background-image: url(images/ui-rw-icons_color_pale_246x246.png); }
.ui-state-hover .ui-rw-icon-color .ui-icon { background-image: url(images/ui-rw-icons_color_246x246.png); }
/* positioning */
.ui-rw-icon-color .ui-icon-pencil, .ui-rw-icon .ui-icon-pencil { background-position: 0 0; }
.ui-rw-icon-color .ui-icon-remove, .ui-rw-icon .ui-icon-remove { background-position: -32px 0; }
这工作正常，我的图标显示。唯一的问题是，图标比jQuery-UI的图标大6个像素，有时候我想重新定位它们，以便它们更好地适应。例如这里
<button name="pencil" class="menubar-button ui-rw-icon" id="menubar-meassure">Measures</button>
<button name="script" class="menubar-button" id="menubar-newmeasure">New Measure</button>
<script>
$('.menubar-button').each(function() {
$(this).button({
icons: {
primary: "ui-icon-" + $(this).attr("name")
}
})
});
</script>
这是它的外观：
http://sakuranohana.org/buttons.png
我想铅笔是一些像素较高。我发现，控制按钮内部的位置上jQuery的UI的CSS文件中的规则：
.ui-button-icon-only .ui-icon,
.ui-button-text-icon-primary .ui-icon,
.ui-button-text-icon-secondary .ui-icon,
.ui-button-text-icons .ui-icon,
.ui-button-icons-only .ui-icon {
position: absolute;
top: 50%;
margin-top: -8px;
}
所以我想，因为我与background-image属性做了我可以做同样的位置：
.ui-rw-icon .ui-button-icon-only .ui-icon,
.ui-rw-icon .ui-button-text-icon-primary .ui-icon,
.ui-rw-icon .ui-button-text-icon-secondary .ui-icon,
.ui-rw-icon .ui-button-text-icons .ui-icon,
.ui-rw-icon .ui-button-icons-only .ui-icon {
top: 40%;
}
但这不起作用。 Opera蜻蜓和Firebug都告诉我，定位规则来自jquery-ui-1.9.0.custom.css而不是我的rw-ui.css。 button()函数创建了这段代码：
<button name="pencil" class="menubar-button ui-rw-icon ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary ui-state-focus" id="menubar-" role="button" aria-disabled="false">
<span class="ui-button-icon-primary ui-icon ui-icon-pencil"></span>
<span class="ui-button-text">Measures</span>
</button>
我不明白为什么我的css类被忽略。我尝试使用CSS选择器，但他们也没有帮助。在尝试扩展对象具有ui-state-hover的行为时，我遇到了类似的问题，我无法覆盖jQuery-UI的css规则。
我在这里错过了什么？
编辑
很好，看完Class Selectors部分后，我意识到，我的问题是，类ui-button-text-icon-primary是在同一组类为ui-rw-icon因此选择.ui-rw-icon .ui-button-text-icon-primary .ui-icon不起作用。但是，这有助于：
.ui-rw-icon.ui-button-icon-only .ui-icon,
.ui-rw-icon.ui-button-text-icon-primary .ui-icon,
.ui-rw-icon.ui-button-text-icon-secondary .ui-icon,
.ui-rw-icon.ui-button-text-icons .ui-icon,
.ui-rw-icon.ui-button-icons-only .ui-icon {
top: 40%;
}
一个小改变，但重要的一个。