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的两个因素 - 继承＆amp;特殊性，就像我定义自定义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

自定义jQuery主题，但是没有应用某些CSS

1 个答案: