自定义jQuery主题，但未应用某些CSS

我正在自定义jQuery主题，为一些按钮添加自定义图标。下面是一个JSFIDLE-（我的自定义CSS定义在底部）

我所做的是采用了一些已经存在的CSS定义，并使它们更加具体，如下所示：

.black-tie .lnkHeader .ui-state-hover .ui-icon, .black-tie .lnkHeader .ui-state-focus .ui-icon {
background-image: url("http://jqueryui.com/resources/images/themeroller/st-stephens.jpg");

}

“lnkHeader”是我定义的一个类。我的一些自定义样式没有被应用，我不知道为什么。e、 g

.black tie.lnkHeader.ui图标.菜单主页{
背景位置：50px 50px；
}

我已确保按钮将所有这些类分配给自己或其家长。我尝试过在CSS定义文件中切换类的顺序。如果我从上面的定义中删除“lnkHeader”，悬停图像的CSS可以工作，但背景位置和边距仍然不能工作

.black tie.lnkHeader.ui图标.菜单新建页面{
背景位置：10px 10px；
}
.black tie.lnkHeader.ui按钮文本图标primary.ui图标、.black tie.lnkHeader.ui按钮文本图标.ui图标{
利润上限：-14px；
}

我需要lnkHeader成为定义的一部分，以便我的自定义不会影响其他按钮

---

我相信我在定义自定义CSS时考虑了影响CSS的两个因素——继承性和特殊性。但很明显我错过了一些东西。请帮忙。蒂亚

在html中，您有以下项目：

<div class="black-tie"><a class="lnkHeader">
<span class="ui-button-icon-primary ui-icon menu-home"></span>
</a></div>

（在

.ui图标

和

.menu home

之间没有空格）

然后类似地，对于其他元素：

.black-tie .lnkHeader .ui-icon.menu-newPage { ... }
.black-tie .lnkHeader.ui-button-text-icon-primary .ui-icon { ... }

我在小提琴中没有看到任何类

.ui按钮文本图标，因此无法说明最后一个选择器应该匹配什么



选择器之间的空白表示儿童；例如，
.ui图标。主菜单
指所有带有
class=menu home
的标签，它们是带有
class=ui图标的标签的子标签（直接或派生）

无空格表示相同的DOM元素，相当于逻辑and；e、 g.
.ui icon.menu home
表示所有同时具有两个类的标签：
class=“ui icon menu home”

您还可以通过这种方式组合不同类型的选择器。例如，以下选择器：
div.my-class[data=my data]
将只匹配

直接子项是用大于号选择的，而空格则无关紧要；例如，
.lnkHeader>.ui图标
指带有
class=ui图标的所有标签
，它们比带有
class=lnkHeader的标签低一级


您可以在这里找到完整的参考资料：
谢谢！这帮我申请了背景职位。仍在尝试让其他属性正常工作。类
.ui按钮文本图标
是调用jQuery按钮小部件后自动应用的。更新：我已经能够使用相同的技术解决所有问题，即删除两个CSS类名之间的空格。非常感谢！删除空格是否意味着“直接子对象”？“如果你能详细说明为什么它会这样工作，我将不胜感激。”阿佩克莎编辑成《答案》；还包括指向w3schools页面的链接
.black-tie .lnkHeader .ui-icon.menu-newPage { ... }
.black-tie .lnkHeader.ui-button-text-icon-primary .ui-icon { ... }