自定义 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 可以工作，但 background-position 和 margin 仍然没有。

.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 的两个因素 - 继承性和特异性。但显然我错过了一些东西。请帮忙。蒂亚！

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 类有关的东西，所以不能说最后一个选择器应该匹配什么。

---

• Whitespace 选择器之间的意思是 children；例如。 .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