自定义jQuery主题，但一些CSS没有被应用

Question

我正在自定义一个jQuery主题来为某些按钮添加自定义图标。这里是一个的jsfiddle - http://jsfiddle.net/Apeksha82/nctPc/2（我的自定义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”是由我定义的类。我的一些自定义样式没有被应用，我不知道为什么。例如

.black-tie .lnkHeader .ui-icon .menu-home { background-position: 50px 50px; }

我已经确定按钮具有所有这些类要么指派给其自身或其家长。我试过在CSS定义文件中切换类的顺序。如果我从上面的定义中删除“lnkHeader”，悬停图像的CSS工作，但背景位置和边距仍然没有。

.black-tie .lnkHeader .ui-icon .menu-newPage { background-position: 10px 10px; } .black-tie .lnkHeader .ui-button-text-icon-primary .ui-icon, .black-tie .lnkHeader .ui-button-text-icons .ui-icon { margin-top: -14px; }

我需要lnkHeader是定义的一部分，使我的自定义不影响其他按钮。

我相信我已经考虑了影响CSS的两个因素 - 继承&的特异性，以我定义自定义CSS的方式。但显然我错过了一些东西。请帮忙。 TIA！

Answer 1

在你的HTML，你有这样的项目：

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

它看起来像什么，你需要选择这<span>是

.black-tie .lnkHeader .ui-icon.menu-home { ... } 

（与.ui-icon和.menu-home之间没有空格）

然后类似的其他元素：

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

我在小提琴中没有看到类.ui-button-text-icons的任何内容，所以不能说最后一个选择器应该匹配什么。

---

• 空白选择器之间装置儿童;例如。 .ui-icon .menu-home意味着class=menu-home是儿童（直接或下降）的标签与class=ui-icon

• 无空白装置相同 DOM元素，是等效于一逻辑AND所有标签;例如.ui-icon.menu-home表示所有标签都有两个类别：class="ui-icon menu-home";

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

• 直接孩子与选择大于标志 - 以及与此，空白不要紧;例如。 .lnkHeader > .ui-icon意味着class=ui-icon这低于标签与class=lnkHeader

一个级别您可以找到一个完整的参考这里的所有标签：http://www.w3schools.com/cssref/css_selectors.asp