css - 自定义 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 {
背景位置: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 有任何内容在 fiddle 中，所以不能说最后一个选择器应该匹配什么。

---

• 选择器之间的空白表示子；例如。 .ui-icon .menu-home表示所有带有 class=menu-home 的标签是带有 class=ui-icon 的标签的子代(直接或后代)

• 无空格 表示相同 DOM 元素，等同于逻辑与；例如.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